Question

我尝试创建我的第一个ember.js应用。日历 -

我的日常模特

App.Day = Ember.Object.extend({
today : null,
dayNumber : null,
addEvent : function()   {
    console.log(this);
    $("#myModal").modal('show');
}
});

html视图

<div class="cal">
    {{#each App.DayList}}
        {{#if this.today}}
        <div class="day today" {{action "addEvent" target="model" }}>
            {{#with this as model}}
            <span class="text">{{this.dayNumber}}</span>
            {{/with}}
        </div>
        {{else}}
        <div class="day" {{action "addEvent" target="model" }}>
            {{#with this as model}}
            <span class="text">{{this.dayNumber}}</span>
            {{/with}}
        </div>
        {{/if}}
    {{/each}}
    </div>

所以点击第一天我显示引导对话框，我不会加载外部数据，但我需要有关点击日的信息。

我的理解是我创建了一个视图

  App.DayDetails = Ember.View.extend({

});

在此视图中我发送了一个ajax请求，但如何在此视图中获取有关点击日的信息？

Answer 1

你几乎从不在视图中做任何AJAX。

视图做两件事：

（1）画自己

（2）回应UI事件（点击，打字等）

你的视图应该从控制器获取它的内容，在这种情况下我想是App.DayController或DayDetailsController。（这是另一回事，最好使用View或Controller等结束您的子类，因此它一目了然地显示了它们的作用。）

控制器获取数据的地方可能会变得复杂。理想情况下，在一个成熟的应用程序中，您将拥有一个数据存储（服务器端数据库的组合概念和ActiveRecord，如果您使用rails），将被查询。但是，简单地说，您可以让控制器负责使用jQuery手动处理ajax请求。只要我们采取捷径，你就可以把这样的电话放在一个地方，（一个单独的控制器，一个特定日期的项目控制器，一天模型本身），而不是视图。当采取这些短路来限制传染时，这很重要...你应该用手动ajax取得JSON，然后通过将其设置为内容，立即迅速将其恢复到ember生态系统中。一个阵列控制器。即，尝试将数据手动插入视图或诸如此类的东西之后，不会再进行一两步。如果可以避免，不要与Ember战斗。

一些事情：

（1）您使用this是多余的，{{with}}语句也是如此。在{{each}}块内部，上下文将是迭代中的当前对象（或其包装控制器，如果您正在使用itemController）。（除非你使用“x in y”语法，在这种情况下上下文仍然是控制器）

（2）模型不应该尝试修改DOM。相反，依靠绑定和控制器来协调UI更改。您可能想要做的是App.DayController，您可以addEvent，{{each}}使用itemController="App.DayController".

App.DayController = Ember.ObjectController.extend({
    addEvent: function () {
        // ...
    }
});

然后，{{each}}模板中每个循环的上下文将是每个单独的日期控制器。控制器将自动成为视图的目标和上下文，因此您的模板将如下所示：

{{#each App.DayList itemController="App.DayController"}}
    <div {{bindAttr class=":day today"}} {{action addEvent}}>{{dayNumber}}</div>
{{/each}}

（{1}}中的:表示:day始终是一个类，但如果day属性为today，则today只会是一个类语境是真实的）

因为每天都会将addEvent发送给自己的控制器，所以无需确定要加载的日期。

ember.js在对话框中加载数据

1 个答案: