Jsviews 助手不再更新可观察更新（数组）答案

【问题标题】：Jsviews helpers don't update on observable update (Array) anymoreJsviews 助手不再更新可观察更新（数组）
【发布时间】：2014-01-21 17:06:30
【问题描述】：

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

这是一个简单的例子。点击“添加朋友”应该再次调用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>

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

【问题讨论】：

标签： jsviews

【解决方案1】：

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

与数组的数据链接得到简化并且更加一致。现在标签不会自动绑定到数组，并在数组时刷新更新。 {^{myTag path.to.array/}} 现在将在 to.array 时更新属性是更新（属性更改）但不是当 to.array 本身发生了明显的变化。（阵列变化）。标签应该选择加入数组绑定或者通过从“for”标签派生 - 如在 “范围”样本：http://www.jsviews.com/#samples/tag-controls/range, 或按照使用 onAfterLink 和 onDispose 添加/删除 onArrayChange 处理程序，如 {^{myWidget .../}} 示例 JsViews 单元测试。这种变化涉及 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}}

【讨论】：

谢谢。实际上，在我的应用程序“朋友”中有更深的嵌套数组。并且 helper 应该在它的变化上被调用，朋友数将保持不变，因此它不会刷新 helper。示例：朋友：{ ['name': 'Name1', 'some_rels': [1,2,3,5]], ['name': 'Name2', 'some_rels': [5,6,3]]在我更新“some_rels”后，应该触发助手。一种解决方法是添加friends_update_time 或friends_hash 并每次更新它，但是我看不到任何使用observable 了。
可以使用observeAll进行深度观察。助手是一个函数，因此它不能隐式知道它的所有依赖项。您可以创建一个帮助器，它是一个计算的可观察对象，您可以在其上声明依赖关系：borismoore.github.io/jsviews/demos/features/observability/…。但同样，这些依赖项是基于 propertyChange 的。我不知道您以前的深度依赖是如何工作的，因为 friends 参数本身并没有引发 arrayChange 事件。您可以从那里使用 observeAll，更改可观察标志或触发可观察事件...