jquery - 寻找条件 subview didInsertElement 事件...或其他东西

标签 jquery jquery-ui ember.js

我假设我遗漏了一些东西,因为到目前为止我需要的任何功能都在 ember.js 中,即使只是没有记录。 (耶 github)

那么我到底应该如何将 jquery.ui 与具有条件 subview 的 View 一起使用?

所以说这是我的模板

<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();
    }
    ...
});

所以问题是 View 将使用 Item 1 & 3 渲染到 DOM 中,然后调用 didInsertElement。因此第 2 项将无法正确构建。

手动观察“someBinding”也会在条件 View 添加到 DOM 之前触发,所以这没有帮助。

那么,一旦所有 View 都进入并绑定(bind)同步,是否有一个事件或某种方式可以调用我的 jQuery?

最佳答案

此解决方案适用于“静态”渲染(在渲染之前设置stuff值,并且不更改...):

Handlebars

<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 中的范围 View 。

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


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

Handlebars

<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 帮助器)渲染项目列表,该列表可能会有所不同。

如果您想要 sample ,请告诉我。

关于jquery - 寻找条件 subview didInsertElement 事件...或其他东西,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11655127/

相关文章:

javascript - 延迟、ajax 和排队功能

javascript - 将处理程序附加到窗口滚动事件

javascript - 具有动态 div 的 CSS 垂直居中

javascript - 使用 jQuery ui sortable 将项目排序到固定容器中

javascript - Ember.js 如何观察输入改变的数组键

jquery - 清除文本区域

jquery - 分段进度条(jQuery UI)

jQuery Explode 在 explode 时更改字体,我该如何停止?

javascript - 在 Controller emberjs 中获取模型

javascript - Ember Data的查找方法: handling SQL 'OR' equivalent query