0

我一直在玩，并且想知道更新数据更改Ember.js的最佳实践是什么。DOM

具体来说，对于模型的每个实例，我都有带有打开和关闭按钮的分隔线。如果模型对象的状态为“打开”，我希望打开按钮消失，如果模型对象的状态为“关闭”，则关闭按钮消失。

据我所知，有几个选择。

jQueryA)在控制器调用的视图中直接更改 DOM 中的元素

B) 设置一个将自动重新加载模板的观察者，并if/else在模板中包含根据更新的模型参数更改内容的语句。

其中之一是首选（或两者都不是）吗？你们会怎么做？

4

2 回答 2

2

看看这个小提琴，它显示了在另一个视图/选项卡中实现的。此示例使用 simpleEm.Controller而不是 a Em.CollectionController，但它可以满足您的需要。

我有 2 个 CSS 类：

.visible {visibility: visible}
.invisible {visibility: hidden}

以下视图classNameBinding在子视图中使用它们。我将模型绑定到父视图并contentBinding指向控制器上的模型，然后子视图有一个属性可以观察currentState父级的属性。当您单击此子视图时，它将设置currentState为“关闭”，并将IsVisible再次评估该方法，从而将正确的值提供给 classNameBinding。

App.OtherView = Em.View.extend({
    templateName: 'other',
    contentBinding: 'controller.content',
    currentStateBinding: 'controller.content.state',
    ButtonView: Ember.View.extend({
        tagName: 'a',
        click: function(e) {
            this.set('parentView.currentState', 'closed');
        },
        classNameBindings: 'IsVisible:btn visible:invisible',
        IsVisible: function() {
            return this.get('parentView.currentState') === 'open';
        }.property('parentView.currentState')    
    })        
});

这是模板的设置方式

<script type="text/x-handlebars" data-template-name="other" >
    <h2>Other</h2>
    ID: {{content.id}}<br />
    Name: {{content.name}}<br />
    State: {{content.state}}<br />
    {{#view view.ButtonView }}
        Close
    {{/view}}            
</script>

或者，我有这个示例（这里是源代码），它在如何使用.property来实现相同功能的概念上非常相似，但这有点复杂，而且是用于导航栏菜单。检查我是如何做的App.NavigationView，你会发现一个名为的子视图NavigationItemView，我有一个classNameBinding. 这样做是检查我的控制器中的属性值，然后检查视图。该比较返回真或假，它将根据调用isActive函数属性的表达式填充类名，与我根据您的问题编写的第一个小提琴几乎相同。

希望这可以帮助。

于 2012-11-12T22:06:40.483 回答
1

我认为您需要详细说明您的问题。这是我基于当前对您问题的理解的回答：从我的角度来看，这两个选项都不是 EmberJS 的好习惯。据我到现在为止，这是 EmberJS 的优势之一，您不必担心手动更新 DOM。您需要做的就是更新您的模型或控制器对象，所有更改都会自动传播到 DOM。

最好的祝福，

于 2012-11-12T15:24:55.510 回答