Question

在提交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>

我知道可以使用嵌套模板（不确定它是否能解决问题）但在实际应用程序中，辅助程序中有更多逻辑，因此嵌套模板无济于事。

Answer 1

是的，这是故意的：请参阅提交说明：

链接到数组的数据简化且更加一致。现在标签不会自动绑定到数组，并在数组时刷新   更新。 {^ {myTag path.to.array /}}现在将在to.array时更新   属性是更新（属性更改）但不是to.array时   本身就会发生变化。（数组更改）。标签应该选择加入   arraybinding是通过派生自“for”标签 - 如同   'range'样本：http://www.jsviews.com/#samples/tag-controls/range，   或者通过使用onAfterLink和onDispose来添加/删除   onArrayChange处理程序，如在{^ {myWidget ... /}}示例中   JsViews单元测试。这种变化涉及到   https://github.com/BorisMoore/jsviews/issues/158

这是一个非常简单的修复。如果你将array.length包含为参数（即使你的帮助函数不使用它），那么JsViews将响应数组长度的变化（这是属性更改，而不是数组更改）并将触发刷新你的帮手：~griends_names（朋友， 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}}

Jsviews帮助程序不再更新observable update（Array）

1 个答案: