如何在视图中切换视图?

时间:2012-01-29 16:33:44

标签: javascript jquery ember.js

我读过这篇文章似乎是我正在寻找的答案,但似乎并不完全理解发生了什么。 Dynamically choosing a view at runtime with Ember + Handlebars

FWIW,据我所知,ember.StateManager无法嵌套。因此,如果应用程序视图中包含子部分,我将无法将其用于在应用程序视图和用户配置文件视图之间切换的单页应用程序。所以我认为必须有另一种方式。

这是一个简单的example来说明我正在尝试做什么。

     (function($){
  window.APP = Ember.Application.create();
  /*models*/
  $.models = {};
  $.models.c = Ember.Object.create({
                    first_name: "joe",
                    last_name: "blow"
                });

  $.models.a = Ember.Object.create({
                    street:"1 wall street plaza",
                    city: "New York City",
                    state: "NY",
                    zip: "10101"
                });

  //views (sections of the application
  $.views = {};
  $.views.name = Ember.View.extend({template:Ember.Handlebars.compile("{{content.first_name}} {{content.last_name}}"),
                   contentBinding: "$.models.c"
                  });

  $.views.address = Ember.View.extend({template: Ember.Handlebars.compile("{{content.street}} {{content.city}} {{content.state}} {{content.zip}}"),
                 contentBinding: "$.models.a"});

  //something to hold the current view(section)
  $.navmodel = Ember.Object.create({current:$.views.address});

  //view to display the current view(section)
  $.nav = Ember.View.create({template: Ember.Handlebars.compile("{{view current}}"),
                   currentBinding: "$.navmodel.current"
                  }); 

  //add to page
  $.nav.appendTo("#content");

  //switch between the pages
  setTimeout(function(){
        $.navmodel.set("current", $.views.name);
        alert("set");
    },1000);
 })(jQuery);

是的,我意识到Ember.StateManager可以用于此,但如果我需要嵌套子视图,StateManager将无法工作吗?

1 个答案:

答案 0 :(得分:2)

首先,我确实相信Ember StateManager确实处理嵌套状态。我不能给你一个具体的例子。我和州有点玩过,但Ember.js的那部分还不够稳定,所以我沮丧地停了下来。

就不使用StateManager而切换视图而言,这是完全可行的。尝试使用ContainerView交换$ .nav视图。像这样的东西应该做的伎俩(小心,未经测试的代码!):

$.nav = Ember.ContainerView.create({
    switchView: function(view) { 
        var childViews = this.get("childViews"); 
        childViews.popObject();      // Remove the current view, if any
        childViews.pushObject(view); // Add the requested view
    }, 
});

Ember documentation有一个关于ContainerView的部分,你应该看一下。