Несколько компонентов нокаута видят те же свойства

UPDATE Интересно, что он работает правильно, если я вставляю HTML в свойство шаблона функции ko.component.register.Несколько компонентов нокаута видят те же свойства

https://jsfiddle.net/h5rnqwu4/1/

ko.components.register('item-2', { 
    viewModel: Item2, 
    template: '<div class="col-md-12" data-bind="visible: $parent.activeView()===\'item-2\'"> <h1>Item 2</h1> <input data-bind="value: comment"/> <h3 data-bind="text: comment"></h3> </div>' 
});

Может быть, как это должно работать?

первые вещи в первую очередь ... Я создал скрипку, показывающую образец кода, чтобы вы могли видеть, что происходит не так.

https://jsfiddle.net/e427a7p2/1/

В сущности У меня есть два компонента, каждый из которых имеет комментарий свойства. Проблема в том, что они, похоже, используют одно и то же свойство комментария, и поэтому, когда я меняю один из них, другие изменения тоже.

Чтобы повторить вопрос выполнить следующие шаги:

Нажмите на пункт 1 и обратите внимание на содержимое поле ввода и ниже текста.
Нажмите на пункт 2 и обратите внимание на содержимое поля ввода и текст ниже.
Вернитесь к пункту 1 (нажмите на заголовок, чтобы вернуться) и измените текст в поле ввода. Что должно произойти, так это то, что текст ниже изменяется, но это не так.
Вернитесь к пункту 2 (нажмите на заголовок, чтобы вернуться) и обратите внимание на содержимое поля ввода и текст ниже. Это то же самое, что и вход, который мы изменили на шаге 3.
Измените содержимое поля ввода на пункте 2, и вы увидите, что текст под ним изменяется.
Вернитесь к пункту 1 (нажмите на заголовок, чтобы вернуться) и обратите внимание, что содержимое поля ввода совпадает с содержимым вашего окна. Приведенный ниже текст все еще не изменился.

Так что, по какой-то причине, хотя они предназначены для отдельных видов моделей, они используют свойство вида (вида).

Любая идея, что я делаю неправильно здесь?

HTML, для компонентов выглядит следующим образом:

<div id="item-1"> 
    <div class="col-md-12" data-bind="with: Item1, visible: activeView() === 'item-1'"> 
     <h1>Item 1</h1> 
     <input data-bind="value: comment" /> 
     <h3 data-bind="text: comment"></h3> 
    </div> 
</div> 

<div id="item-2"> 
    <div class="col-md-12" data-bind="with: Item2, visible: activeView() === 'item-2'"> 
     <h1>Item 2</h1> 
     <input data-bind="value: comment" /> 
     <h3 data-bind="text: comment"></h3> 
    </div> 
</div>

и JS выглядит следующим образом:

var Item1 = function Item1() { 
    var self = this; 

    console.log(self); 

    self.title = ko.observable('Item 1'); 
    self.comment = ko.observable('comment: item 1'); 
} 

var Item2 = function Item2() { 
    var self = this; 

    console.log(self); 

    self.title = ko.observable('Item 2'); 
    self.comment = ko.observable('comment: item 2'); 
} 

ko.components.register('menu', { 
    viewModel: Menu, 
    template: {element: 'menu'} 
}); 

ko.components.register('item-1', { 
    viewModel: Item1, 
    template: {element: 'item-1'} 
}); 

ko.components.register('item-2', { 
    viewModel: Item2, 
    template: {element: 'item-2'} 
}); 

var VM = function VM() { 
    var self = this; 

    self.activeView = ko.observable(); 

    Sammy(function() { 
     this.get('/', function(context) { 
      self.activeView('menu'); 
     }); 

     this.get('#/item-1', function(context) { 
      self.activeView('item-1'); 
     }); 

     this.get('#/item-2', function(context) { 
      self.activeView('item-2'); 
     }); 
    }).run(); 
}; 

ko.applyBindings(new VM());

Спасибо,

Адам

источник

2015-07-07 megsum

У вас есть опечатка в вашем HTML, как идентификатор = "элемент-2" используется. Это не исправить. – gkempkens

@gkempkens, так что я ... спасибо :-) – megsum

Элементы могут быть определены в HTML. Лучший способ сделать это в теге скрипта. Это гарантирует, что шаблон может содержать таблицы и т.д.

<script id="item-1" type="text/template"> 
    <div>markup here</div> 
</script>

в вашей скрипке вы задающие шаблоны (пункт-1 и пункт-2) тело.Если вы привязываете модель представления ко всему документу ko.applyBindings(new VM());, это связывает ViewModel с вашими шаблонами элементов, и это неверно.

Ваш HTML должен выглядеть следующим образом

<body> 
    <div id="container"> 
    <item-1></item-1> 
    </div> 
    <div id="item-1">item template id</div> 

<script type="text/javascript"> 
    // only bind view model to the container and not to the templates 
    ko.applyBindings(new ViewModel(),document.getElementById("container")); 
</script> 
</body>

обновленной скрипка: https://jsfiddle.net/e427a7p2/2/

источник

2015-07-07 18:28:19 Martijn

Несколько компонентов нокаута видят те же свойства

ответ

Смежные вопросы