Question

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

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

据我所知，有几种选择。

A）在控制器调用的视图中用jQuery直接更改DOM中的元素

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

是其中一个首选（或两者都不是）？你们会做什么？

Answer 1

查看this fiddle，其中显示了在其他视图/标签中实现的内容。此示例使用简单的Em.Controller代替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>

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

希望这有帮助。

Answer 2

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

致以最诚挚的问候，

Ember.js用于更新视图的选项

2 个答案: