RactiveJS 和 Stapes 模型没有更新

Question

我正在尝试为 RactiveJS 中的 Stapes 对象创建过滤，但似乎两种方式的绑定都无法正确响应更新。

我不知道哪里出了问题，因为我认为它应该可以正常工作，我在这里创建了一个代码示例：

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

Answer 1

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

这是一个使用 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>

JS:

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);

Answer 2

这是我使用计算属性和适合您的用例的过滤器的模式。结果我无法让 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" />

已更新 垃圾箱在这里：https://jsbin.com/bomumajagu/edit?html,output

Push 对抗镫骨模型：

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

RactiveJS 和 Stapes 模型没有更新

RactiveJS and Stapes model not updating

javascript

ractivejs

stapes.js