Question

我在小提琴上有一个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>

JavascriptCode

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) {

    }
});

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

最初加载应用时，它有网址，例如 - index.html＃/ widgets 在选择一些“网站”之后，网址是 - index.html＃/ widgets / sites / 0,1 （编辑：添加jsbin，http://jsbin.com/ovumod/1/，看起来更容易看到URL如何用JsBin而不是JsFiddle改变）

到目前为止，一切看起来都不错，但是当我将URL（index.html＃/ widgets / sites / 0,1）复制到浏览器时，如何确保ID为0和1的网站被检查并更正根据所选的“sites”参数??

加载成绩数据

此外，该模式甚至看起来是正确的吗？我是Ember.js的新手，应用程序来自this stackoverflow post的灵感任何建议使用多个级联“数组/列表”构建Ember应用程序的建议将不胜感激！提前谢谢！

Ember JS架构模式 - 具有多个级联列表的应用程序

0 个答案: