Question

我假设我错过了一些东西，因为到目前为止我所需要的任何功能都在ember.js中，即使只是没有记录。（Yay github）

那么我应该如何使用具有条件子视图的视图的jquery.ui？

所以说这是我的模板

<ul>
    <li>Item 1</li>
    {{#if someBinding}}
    <li>Item 2</li>
    {{/if}}
    <li>Item 3</li>
</ul>

在我的相应观点中......

someView = Ember.View.extend({
    ...
    didInsertElement: function() {
        this.$('ul>li').button();
    }
    ...
});

因此，问题在于视图将通过Item 1＆amp ;;呈现到DOM中。 3然后调用didInsertElement。所以第2项将无法正确构建。

并且在将条件视图添加到DOM之前手动观察'someBinding'将会触发，因此没有帮助。

一旦所有观点都进入并且绑定同步，我是否可以通过某种方式调用我的jQuery？

Answer 1

此解决方案适用于渲染前的“静态”渲染（stuff值集，而不会更改...）：

<强>车把

<script type="text/x-handlebars" data-template-name='app-view'>
    <ul>
        <li>Item 1</li>
        {{#if view.stuff}}
        <li>Item 2</li>
        {{/if}}
        <li>Item 3</li>
    </ul>
</script>

<强> JS

App.ApplicationView = Ember.View.extend({
    templateName: 'app-view',

    stuffBinding: 'App.stuff',

    didInsertElement: function () {
        this.$('ul>li').button();
    }
})

您在视图中缺少范围view.。

在这里工作JSFiddle：http://jsfiddle.net/MikeAski/H6MNj/

对于随时间变化的stuff值，尝试将Item 2渲染解耦，并将其嵌套在包含条件显示逻辑的子视图中。

<强>车把

<script type="text/x-handlebars" data-template-name='app-view'>
    <ul>
        <li>Item 1</li>
        {{#view view.stuffView}}Item 2{{/view}}
        <li>Item 3</li>
    </ul>
</script>

<强> JS

App.ApplicationView = Ember.View.extend({
    templateName: 'app-view',

    didInsertElement: function () {
        this.$('ul>li').button();
    },

    stuffBinding: 'App.foo.bar',

    stuffView: Ember.View.extend({
        tagName: 'li',

        stuffBinding: 'App.foo.bar',

        isVisible: function() {
            var stuff = this.get('stuff');
            return stuff;
        }.property('stuff'),

        didInsertElement: function () {
            this.$().button();
        }
    })
})

JSFiddle更新了@ http://jsfiddle.net/MikeAski/H6MNj/3/

另一种可能的方法是使用CollectionView（或each帮助程序来呈现项目列表，这可能会有所不同。

如果您想要样品，请告诉我。

寻找条件子视图didInsertElement事件......或者其他东西

1 个答案: