3

我正在尝试使用 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/

非常感谢提前...

4

1 回答 1

8

问题是您将 ap 标签嵌套在另一个标签中。模板引擎无法解析这个不正确的标记。

当我认为您想要另一个 foreach 时，您也在使用 with 绑定。

<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);
}

您不需要定义 id 等，因为它们都由映射插件处理。

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

希望这可以帮助。

于 2012-03-06T00:32:08.583 回答