RactiveJS和Stapes模型不更新

Question

我试图在RactiveJS中为Stapes对象创建一个筛选器，但这两种绑定方式似乎没有对更新做出正确的响应。

我不知道哪里出了问题，因为我认为它应该在没有任何问题的情况下工作，所以我在这里创建了一个代码示例：

https://jsbin.com/sajeje/4/edit?html,output

Answer 1

下面是我所使用的模式，用于使用带有适合您的用例的过滤器的计算属性。我无法让Stapes对象作为结果直接使用，但是有一个getAllAsArray()似乎可以工作：

  computed: {
    filtered: function () {
       var query = this.get( 'query').trim(),
           users = this.get( 'users' );

      return query ? users.search(query) : users.getAllAsArray();
    }
  },

  data: function () {
    return {
      users: usersModel,
      query: ''
    }
  }

将子组件用作纯反应性编程，而不需要事件：

<Search query="{{query}}" placeholder="Search users" />

更新的 bin这里：https://jsbin.com/bomumajagu/edit?html,output

推动工作与Stapes模型：

this.get( 'users' ).push( { name: newUser } );

Answer 2

保持您的用户数组。您的筛选结果来自您的搜索查询和用户数组。为此使用计算属性。实质上，搜索结果是另一个数组。

下面是一个使用POJO的例子，不是Stapes，而是相同的想法：http://jsfiddle.net/561fj33a/

HTML：

<script type="template/ractive" id="template-users-list">
    <div>
        <input type="text" value="{{ query }}">
    </div>
    <ul>
        {{# usersList }}
        <li>{{ name }}</li>
        {{/}}
    </ul>
</script>

联署材料：

var UsersList = Ractive.extend({
    template: '#template-users-list',
    data: {
        query: '',
        users: []
    },
    computed: {
        usersList: function () {
            var query = this.get('query');
            var users = this.get('users');
            return !query ? users : users.filter(function (user) {
                return ~user.name.toLowerCase().indexOf(query);
            });
        }
    }
});

var usersList = new UsersList({
    el: 'body',
    append: true
});

setTimeout(function () {
    usersList.set('users', [{
        name: 'James'
    }, {
        name: 'John'
    }, {
        name: 'Jenny'
    }, {
        name: 'George'
    }, {
        name: 'Harry'
    }]);
}, 2000);