KnockOut Mapping Иерархический объект JS - PullRequest
Новая
       26

KnockOut Mapping Иерархический объект JS

3 голосов
/ 06 марта 2012

Я пытаюсь создать модели представления, используя плагин отображения KnockOut,

Это объект, в основном ниже предложение со словами в нем.

var data = {
name: 'Example Title',
sentences: [
    {id: 1, words: [{text: 'word1'}, {text: 'word2'}]},
    {id: 2, words: [{text: 'word3'}, {text: 'word4'}]}
           ]};

Я хотел бы иметь три модели представления,

Статья должна содержать предложения, предложение должно содержать слова 

var ArticleViewModel = function(data) 
{
  var self = this;
  self.id = ko.observable(data.id);
  self.sentences = ko.observableArray([]);
}

var SentenceViewModel = function(data) 
{
  var self = this;
  self.id = ko.observable(data.id);
  self.words = ko.observableArray([]);
}

var WordViewModel = function(data) 
{
  var self = this;
  self.id = ko.observable(data.id);
  self.text = ko.observable(data.text);
}

Я хотел бы поместить это вПосмотрите, как показано ниже; 

<p data-bind="foreach:sentences">
  <span data-bind="foreach:words">
     <span data-bind="text:text">
  </span>
</p>

Я даже не уверен, что то, что я пытаюсь достичь, выполнимо, но я предполагаю, что мне нужны сопоставления, но я не могу сделать эту работу,

здесьНекоторые мои исследования, возможно, помогут лучше понять мою проблему, http://jsfiddle.net/sureyyauslu/2wTjy/6/

Заранее большое спасибо ...

1 Ответ

8 голосов
/ 06 марта 2012

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

Вы также использовали переплет с, когда я думаю, что вы хотели другой foreach. 

<p data-bind="foreach:sentences">
        <span data-bind="text:id"></span>
        <span data-bind="foreach:words">
            <span data-bind="text:text"></span>                   
        </span>
</p>

Наконец модель предложения может быть уменьшена до 

var mySentenceModel = function(data) {
    var self = this;
    ko.mapping.fromJS(data, wordMapping, self);
}

Вам не нужно определять идентификатор и т. Д., Поскольку все это решается плагином отображения.

http://jsfiddle.net/madcapnmckay/6hMA3/

Надеюсь, это поможет.

...