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

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

ember.js

Ember.js Ember JS架构模式-一个具有多个级联列表的应用程序,ember.js,Ember.js,我在fiddle上有一个ember.js应用程序 HTML 该应用程序基本上有两个列表，“网站”列表和“等级”列表。根据“站点”的选择，应用程序应返回服务器，获取数据并重新呈现“等级”列表-基本上“站点”和“等级”是级联过滤器最初加载应用程序时，它有url，例如-index.html#/widgets 在选择了一些“站点”之后，url是-index.html#/widgets/sites/0,1 （编辑：添加jsbin，似乎更容易看到URL是如何使用jsbin而不是JSFIDLE更改的）到目

我在fiddle上有一个ember.js应用程序

HTML

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

最初加载应用程序时，它有url，例如-index.html#/widgets 在选择了一些“站点”之后，url是-index.html#/widgets/sites/0,1 （编辑：添加jsbin，似乎更容易看到URL是如何使用jsbin而不是JSFIDLE更改的）

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

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

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

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

    }
});