0

在 Commit 48 (Beta Candidate) 之后，我无法再获得可观察的数组逻辑。我知道它已经改变了。我已经阅读了更新日志并使用了新的提交有一段时间了，但无法让它工作。助手只是不再更新。任何帮助表示赞赏。

这是一个简单的例子。单击“添加朋友”应该再次调用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”标签派生 - 如在“范围”示例中：http: //www.jsviews.com/#samples/tag-controls/range，或者按照使用 onAfterLink和 onDispose 添加/删除 onArrayChange 处理程序，如 JsViews 单元测试中的 {^{myWidget .../}} 示例。此更改与 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 回答