问Jsview助手不再对可观察更新(Array)进行更新
EN

Stack Overflow用户

提问于 2014-01-21 09:06:30

回答 1查看 773关注 0票数 0

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

我知道可以使用嵌套模板(不确定它是否能解决问题)，但在实际应用程序中，helper中有更多的逻辑，因此嵌套模板不会有帮助。

jsviews

AIGC及大模型加速场景解决方案

为有AI内容生成、大模型需求的企业客户快速打造一站式方案

回答 1

Stack Overflow用户

发布于 2014-01-21 17:32:57

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

数据链接到数组是简化和更一致的。现在，标签不会自动绑定到数组，并在数组更新时刷新。{^{myTag路径. to.array /}现在将在to.array属性被更新时更新(属性更改)，而不是当to.array本身发生明显变化时更新。(数组更改)。标签应该选择通过从"for“标记派生(如'range‘示例：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_names)。

  {^{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}}