Question

我现在正在学习CanJS，所以我想尝试一个非常基本的小型演示。演示是您将在顶部显示不同类型的移动充值计划（单选按钮），并通过选择每个计划，相应的价格选项将显示在底部的表格中。

对于这个演示，我创建了两个Model，2个Control和2个Template文件，我的问题是两个控件如何相互通信？标准方式是什么？

现在我通过它的实例直接调用控制方法，但我不确定它是否是正确的方法。另请解释Can.Route。

输出 http://jsfiddle.net/sabhab1/2mxfT/10/

数据

var CATEGORIES = [{id: 1 , name: "2G Internet Recharge"},
                  {id: 2 , name: "3G Internet Recharge"},
                  {id: 3 , name: "full talktime Recharge"},
                  {id: 4 , name: "Validity and talktime Recharge"},
                  {id: 5 , name: "National and international roaming"}];
var RECHARGEAMOUNTS =[{
                       id: 1 , 
                       values : [{amount: "Rs. 100" , benefit:"300 MB" ,validity:"30"},
                                 {amount: "Rs. 200" , benefit:"1 GB" ,validity:"30"}]
                       },
                       {
                       id: 2 , 
                       values : [{amount: "Rs. 10" , benefit:"300 MB" ,validity:"30"},
                                 {amount: "Rs. 99" , benefit:"100 GB" ,validity:"90"}]
                       },
                       {
                       id: 3 , 
                       values : [{amount: "Rs. 80" , benefit:"1 GB" ,validity:"50"},
                                 {amount: "Rs. 99" , benefit:"100 GB" ,validity:"50"}]
                       },
                       {
                       id: 4 , 
                       values : [{amount: "Rs. 55" , benefit:"30 MB" ,validity:"10"},
                                 {amount: "Rs. 200" , benefit:"1 GB" ,validity:"30"},
                                 {amount: "Rs. 99" , benefit:"100 GB" ,validity:"90"}]
                       },
                       {
                       id: 5 , 
                       values : [{amount: "Rs. 880" , benefit:"100 MB" ,validity:"90"},
                                 {amount: "Rs. 550" , benefit:"2 GB" ,validity:"30"},
                                 {amount: "Rs. 1000" , benefit:"4 GB" ,validity:"90"},
                                 {amount: "Rs. 1550" , benefit:"10 GB" ,validity:"90"}]
                       }
                     ];

模型

//Model Category
CategoryModel = can.Model({
  findAll : function(){
      return $.Deferred().resolve(CATEGORIES);
    }
},{});

//Model Category
ReachargeAmountModel = can.Model({
    findAll : function(){
      return $.Deferred().resolve(RECHARGEAMOUNTS);
    },
    findOne : function(params){
      return $.Deferred().resolve(RECHARGEAMOUNTS[(+params.id)-1]);
    }
},{});

控制

**// Can Control 
var CategoryControl = can.Control({
    // called when a new Todos() is created
    init: function (element, options) {
        // get all todos and render them with
        // a template in the element's html
        var el = this.element;
        CategoryModel.findAll({}, function (values) {
            el.html(can.view('categoriesEJS', values))
        });
        this.options.rchAmtCtrl = new RechargeAmountControl("#rechnageAmountView"); 
    },
    'input click' : function( el, ev ) {
        var id = el.data('category').attr('id');
        console.log(id);
        this.options.rchAmtCtrl.update(id);
    }

});
// Can Control 
var RechargeAmountControl = can.Control({
    // called when a new Todos() is created
    init: function (element, options) {
        // get all todos and render them with
        // a template in the element's html
        this.update(1);//this.update(id,this.element);
    },
    update : function(id){
        var el = this.element;
        ReachargeAmountModel.findOne({id: id}, function( rechargeAmount ){
            // print out the todo name
            //console.log(rechargeAmount.values[id].attr('benefit'));
            el.html(can.view('RechnageAmountEJS', rechargeAmount.values));
        });
    }
});**

查看

<form id='categoriesView'></form>
</p>
<table id='rechnageAmountView'></table>
<script type='text/ejs' id='RechnageAmountEJS'>
    <tr>
        <th>Recharge Amount</th>
        <th>Benefits</th>
        <th>Validity(Days)</th>
    </tr>
    <% this.each(function( rechargeAmount ) { %>
        <tr>
            <td>
                <%= rechargeAmount.attr( 'amount' ) %>
            </td>   
            <td>
                <%= rechargeAmount.attr( 'benefit' ) %>
            </td>   
            <td>
                <%= rechargeAmount.attr( 'validity' ) %>
            </td> 
        </tr>   
    <% }) %>

 </script>

<script type='text/ejs' id='categoriesEJS'>
    <% this.each(function( category ) { %>
        <input type="radio" 
            name="category" 
            <%= category.attr('id') == 1 ? 'checked' : '' %>
            value=<%= category.attr( 'name' ) %> 
            <%= (el) -> el.data('category',category) %>>
                <%= category.attr( 'name' ) %>
        </input>    
    <% }) %>
</script>

主要电话

new CategoryControl("#categoriesView");

Answer 1

有几种方法可以做到这一点。

1。直接调用方法

这是你正在做的事情，并不一定是错的。为了使事情更加灵活，您可以在初始化RechargeAmountControl时传递CategoryControl的类或实例，而不是直接使用它。

2。 DOM事件

在这里，它更多地涉及面向事件的架构。如果您通常想要通知其他控件，您可以触发任何类型的事件并让他们听取它。这样的事情：http://jsfiddle.net/2mxfT/11/

' rechargeAmountUpdated': function(element, event, id){
    var el = this.element;
    console.log(arguments);
    ReachargeAmountModel.findOne({id: id}, function( rechargeAmount ){
        // print out the todo name
        //console.log(rechargeAmount.values[id].attr('benefit'));
        el.html(can.view('RechnageAmountEJS', rechargeAmount.values));
    });
}

3。可观察

另一个选择是使用Observables来维护共享状态。这是关注数据并让实时绑定完成所有其他工作的好方法。为了使事情更灵活，应在控制初始化期间传递状态对象（请参阅http://jsfiddle.net/2mxfT/12/）：

var state = new can.Observe();

new RechargeAmountControl("#rechnageAmountView", {
    state: state
}); 
new CategoryControl("#categoriesView", {
    state: state
});

state.attr('rechargeId', 1);

然后您可以像这样在RechargeAmountControl中监听属性更改：

'{state} rechargeId': function(Construct, event, id){}

每当您更新状态Observe时都会调用此处理程序。

这也是can.route的用武之地。基本上，can.route是一个将状态保存在位置哈希中的Observe。在上面的示例中，如#!&rechargeId=1（除非您初始化特定路线，如can.route(':rechargeId')）。如果位置散列发生更改，则Observe将更新，反之亦然。

CanJS - 控制通信

1 个答案:

1。直接调用方法

2。 DOM事件

3。可观察