Активирования выколотка привязки к определенной части документа

Question

Рассмотрим этого кода:

$(document).ready(function() { 
     var menuView = function() { 
      var self = this; 
      this.blancos = ko.observableArray([]); 

      this.load_blancos = function() { 
       $.getJSON("{% url api_template_list_create %}", function (data) { 
        ko.mapping.fromJS(data, {}, self.blancos); 
       }) 
      }; 

      this.init = function() { 
       self.load_blancos(); 
      }; 

      this.init(); 
     }; 

     ko.applyBindings(new menuView(), document.getElementById('blancos_menu')); 
    }); 

И этот HTML:

<ul class="dropdown-menu" id="blancos_menu"> 
    <li><a href="{% url template_planning %}">Create new</a></li> 
    <li class="divider"></li> 
    <span data-bind="text: $root.blancos"></span> 
    <!-- ko foreach: $root.blancos --> 
    <li> 
     <a href="#" data-bind="text:name"></a> 
    </li> 
    <!-- /ko --> 
    </ul> 

КО: функция Еогеаспа не будет выполняться (т.е. нет элементов списка сгенерированных). Я вижу «объект объекта», [объект объекта] »в предыдущем промежутке (там для целей тестирования).

Для очень странной причины, когда я меняю линию <span data-bind="text: $root.blancos"></span> на <span data-bind="text: blancos"></span>, выполняется функция ko: foreach, и я могу увидеть разные элементы списка.

Удивительно, но я получаю ошибку JavasScript, указывающую, что blancos не определен и, следовательно, не может быть привязан. (НО! Пробел по-прежнему содержит текст «Объект объекта», [Объект объекта] »).

Я действительно не могу обойти это; спасибо за изучение этого.

Кстати, данные, возвращаемые вызов JSON является:

[{"id": 1, "name": "123"}, {"id": 2, "name": "test_wzzob"}] 

UPDATE

Изменение

ko.mapping.fromJS(data, viewModel); 

в

ko.mapping.fromJS(data, {}, self.blancos); 

делает трюк на самом деле, но есть еще ошибка

Uncaught Error: Unable to parse bindings. 
Message: ReferenceError: blancos is not defined; 
Bindings value: foreach: blancos 

То же самое относится и к другим свойствам или методам. I dont't получить эту ошибку при добавлении переменных (или функций) Я привязываю в HTML с $ root (но тогда они пустые).

Answer 1

ko.applyBindings(new menuView(), document.getElementById('blancos_menu')); 

заменить это

ko.applyBindings(new menuView(),$("#blancos_menu")[0]); 

и почему вы используете это?

<span data-bind="text: $root.blancos"></span> 
    <!-- ko foreach: $root.blancos --> 

вы можете использовать

<ul data-bind="foreach: blancos"> 
<li data-bind="<ARRAY ELEMENT IN blancos>"></li> 
</ul> 

Answer 2

Что происходит, когда вы просто используете Бланко, а не $ root.blancos?Вы не должны корень, а Бланко является свойством модели представления, что вы привязка к той части страницы:

<li data-bind="foreach: blancos"> 
    <a href="#" data-bind="text:name"></a> 
</li> 

Answer 3

Docs говорят:

// Every time data is received from the server: 
ko.mapping.fromJS(data, viewModel); 

но поставляет observableArray вместо Зрения Модель:

ko.mapping.fromJS(data, {}, self.blancos); 

Попробуйте так:

ko.mapping.fromJS({ blancos: data }, {}, self);