2

我假设我遗漏了一些东西，因为到目前为止我需要的任何功能都在 ember.js 中，即使只是没有记录。（耶 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 & 3 渲染到 DOM 中，然后调用 didInsertElement。因此第 2 项将无法正确构建。

在条件视图也被添加到 DOM 之前，手动观察“someBinding”也会触发，所以这无济于事。

那么一旦所有视图都进入并同步绑定，是否有一个事件或某种方式可以调用我的 jQuery？

4

1 回答 1

2

此解决方案适用于“静态”渲染（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助手）呈现可能会有所不同的项目列表。

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

于 2012-07-26T06:36:21.357 回答