2

我在小提琴上有一个 ember.js 应用程序，http://jsfiddle.net/yBtbu/7/

HTML

<body>
    <script type="text/x-handlebars">
        <h2>Welcome to Ember.js</h2>
        {{outlet}}
    </script>

    <script type="text/x-handlebars" data-template-name="widgets">
        Widgets
        <ul>
        {{#each item in model.sites itemController="site"}}
            <li>
                {{view Ember.Checkbox checkedBinding="isSelected"}}
                {{item.desc}}
            </li>
        {{/each}}
        </ul>
        <ul>
        {{#each item in model.grades itemController="grade"}}
            <li>
                {{view Ember.Checkbox checkedBinding="isSelected"}}
                {{item.desc}}
            </li>
        {{/each}}
        </ul>
    </script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.4/handlebars.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.6/ember.min.js"></script>

</body>

Javascript代码

SITES = [
    { id: 0, desc: "abc" },
    { id: 1, desc: "def" }
];

GRADES = [
    { id: 1, desc: "first" },
    { id: 2, desc: "second" }
];


App = Ember.Application.create();

App.Site = Ember.Object.extend({});
App.Grade = Ember.Object.extend({});

App.Router.map(function () {
    // put your routes here
    this.resource('widgets', { path: 'widgets' }, function () {
        this.resource('sites', { path: 'sites/:site_id' }, function () {
            this.resource('grades', { path: 'grades/:grade_id' });
        });
    });
});

App.IndexRoute = Ember.Route.extend({
    redirect: function () {
        this.transitionTo('widgets');
    }
});

App.WidgetsRoute = Ember.Route.extend({
    model: function (params) {
        var sites = Ember.A();
        SITES.forEach(function (item) {
            sites.pushObject(App.Site.create(item));
        });


        var grades = Ember.A();
        grades.pushObject(App.Grade.create({ id: -1, desc: "all" }));

        return Ember.Deferred.promise(function (p) {
            p.resolve({
                sites: sites,
                grades: grades
            });
        });
    }
});

App.WidgetsController = Ember.ObjectController.extend({
    selectedSites: [],
    selectedGrades: [],
    subsequentFilters: function () {
        //!!! why this is trigged when the application initially loads
        try {
            console.log("check a site");
        } catch (e) { }

        var selected = this.get('model').sites.filterProperty("isSelected", true);
        //this.transitionToRoute("sites", selected.getEach("id"));
        if (selected.length > 0) {
            try {
                console.log("go to sites");
            } catch (e) { }
            this.transitionToRoute("sites", selected.getEach("id"));
        } else {
            var grades = Ember.A();
            grades.pushObject(App.Grade.create({ id: -1, desc: "all" }));
            this.set("model.grades", grades);
            this.transitionToRoute("widgets");
        }
    }.observes('model.sites.@each.isSelected'),
    grades: function () {
        var grades = Ember.A();
        GRADES.forEach(function (item) {
            grades.pushObject(App.Grade.create(item));
        });
        this.set("model.grades", grades);
    }.observes('selectedSites')
});

App.SiteController = Ember.ObjectController.extend({
    needs: ['widgets'],
    isSelected: function (key, value) {
        var model = this.get('model');

        if (value === undefined) {
            // property being used as a getter
            return model.get('isSelected');
        } else {
            // property being used as a setter
            model.set('isSelected', value);

            return value;
        }

        try {
            console.log("update isSelected");
        } catch (e) { }
    }.property('model.isSelected')
});

App.GradeController = Ember.ObjectController.extend({
    needs: ['widgets'],
    isSelected: function (key, value) {
        var model = this.get('model');

        if (value === undefined) {
            // property being used as a getter
            return model.get('isSelected');
        } else {
            // property being used as a setter
            model.set('isSelected', value);

            var widgetsController = this.get('controllers.widgets');
            var selectedGrades = widgetsController.get('selectedGrades');
            selectedGrades.pushObject(model);
            ////model.save();
            return value;
        }

        try {
            console.log("come on");
        } catch (e) { }
    }.property('model.isSelected')
});

App.SitesRoute = Ember.Route.extend({
    model: function (params) {
        var selectedSites = params.site_id.split(',');
        return selectedSites;
    },
    setupController: function (controller, model) {
        this.controllerFor('widgets').setProperties({ selectedSites: model })
    },
    serialize: function (model) {
        return { site_id: model.join(',') };
    },
    deserialize: function (model) {

    }
});

该应用程序基本上有两个列表，“站点”列表和“等级”列表。基于“站点”的选择，应用程序应该返回服务器并获取数据并重新渲染“等级”列表 - 基本上“站点”和“等级”是级联过滤器。

最初加载应用程序时，它具有 url 例如 - index.html#/widgets 在选择“站点”后，该 url 为 - index.html#/widgets/sites/0,1 （编辑：添加 jsbin，http： //jsbin.com/ovumod/1/，似乎更容易看到使用 JsBin 而不是 JsFiddle 更改 URL）

到目前为止，一切看起来都不错，但是当我将 url index.html#/widgets/sites/0,1 复制到浏览器时，如何确保检查 id 为 0 和 1 的站点并且正确的成绩数据是根据选定的“站点”参数加载？？

此外，这种模式一开始看起来是否正确？我是 Ember.js 的新手，该应用程序来自这个 stackoverflow 帖子的灵感任何关于构建具有多个级联“数组/列表”的 Ember 应用程序的建议将不胜感激！提前致谢！

4

0 回答 0