0

コミット 48 (ベータ候補) の後、監視可能な配列ロジックを取得できなくなりました。私はそれが変わったことを知っています。私は変更ログを読み、新しいコミットでしばらく遊んでいましたが、うまくいきませんでした。ヘルパーはもう更新されません。どんな助けでも感謝します。

簡単な例を次に示します。「友達を追加」をクリックすると、再度 friends_names を呼び出す必要があります..しかし、それはもうありません:

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery.js"></script>
  <script src="http://www.jsviews.com/download/jsviews.js"></script>
</head>
<body>

<div id="people"></div>

<script id="peopleTemplate" type="text/x-jsrender">
  <button id="add">Add person</button><br />
  {^{for people}}
   <div>
        Name: {{>name}}, 
        Friends: <span data-link="html{:~friends_names(#data.friends)}"></span>

        <button class="friend-add">add friend</button>
   </div>
  {{/for}}
</script>

<script>
var data = {
  people: [
    {
      name: "Adams",
      friends: [
        {name:'Petere'}, 
        {name:'Steve'}
      ]
    },
    {
      name: "Eugenia",
      friends: [
        {name:'Bob'}
      ]
    }
  ]
};

$.templates({ 
  peopleTmpl: "#peopleTemplate"
});

var friends_names = function(friends){
        friends = friends || []
        var names = []
        for (var i=0, l=friends.length; i<l; i++) {
            names.push(friends[i].name);
        }
        return '<b>' + names.join(', ') + '</b>';
    };

$.views.helpers({friends_names:friends_names});

$.templates.peopleTmpl.link("#people", data);

//debug
$.observable(data).observeAll(function (ev, obj) { console.log('change', obj); });

$("#add").on("click", function() {

  $.observable(data.people).insert({
    name: "Amos",
    friends: []
  });
})

$('#people').on('click', '.friend-add', function(e){
    e.preventDefault();

    var name = 'Some anonymous friend' + Math.floor((Math.random()*100)+1);

    var friends = $.view(this).data.friends;
    $.observable(friends).insert({
        name: name
    });
});

</script>
</body>
</html>

ネストされたテンプレートを使用できることはわかっていますが (問題が解決するかどうかはわかりません)、実際のアプリケーションではヘルパーにもっと多くのロジックがあるため、ネストされたテンプレートは役に立ちません。

4

1 に答える 1

0

はい、これは意図的なものです: コミットノートを参照してください:

  • 配列へのデータ リンクが簡素化され、一貫性が向上しました。タグは自動的に配列にバインドされず、配列が更​​新されると更新されます。{^{myTag path.to.array/}} は、to.array プロパティが更新 (プロパティの変更) されたときに更新されますが、to.array 自体が明らかに変更されたときには更新されません。(配列変更)。タグは、「for」タグから派生するか、「range」サンプルのように配列バインディングにオプトインする必要があります: http://www.jsviews.com/#samples/tag-controls/range、または onAfterLink の使用に従うJsViews 単体テストの {^{myWidget .../}} サンプルのように、 onArrayChange ハンドラーを追加/削除する onDispose 。この変更は https://github.com/BorisMoore/jsviews/issues/158に関連しています

これは本当に簡単な修正です。array.length をパラメーターとして含めると (ヘルパー関数でそれを使用しない場合でも)、JsViews は配列の長さの変更 (配列の変更ではなくプロパティの変更) に応答し、更新をトリガーします。あなたのヘルパー: ~friends_names(friends, friends.length )

  {^{for people}}
   <div>
        Name: {{>name}}, 
        Friends: <span data-link="html{:~friends_names(friends, friends.length)}"></span>

        <button class="friend-add">add friend</button>
   </div>
  {{/for}}
于 2014-01-22T01:32:57.353 に答える