3

KnockOut マッピング プラグインを使用してビュー モデルを作成しようとしています。

これがオブジェクトです。基本的に以下は単語を含む文です。 

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

3 つのビュー モデルが必要です。

記事には文が含まれている必要があり、文には単語が含まれている必要があります

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

これを以下のように View に入れたいと思います;

<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 に答える