单击Ember.button更新Ember.TextField

Question

我不知道该怎么做，我想禁用Ember.TextField并使用一个按钮来更新Ember.TextField中的数字，每次点击它都会增加从0开始的数字。原因就是在iPad上时，Ember.TextField上的向上和向下按钮对于一个人来说很小，所以要禁用Ember.TextField，这样键盘也不会弹出并有一个向上按钮和向下按钮相反，每次触摸时，会增加或减少Ember.TextField中显示的数字

这里是我的代码：

<?php if($_SERVER['HTTP_USER_AGENT'] == 'Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10') { ?>
    <div class="pull-right">{{view Ember.TextField class="span1 qnty-bulk" valueBinding="item.qnty" type="text" }}</div>
    <button id="increase" {{action "increase"}}>
       Up
    </button>
    <button id="decrease" {{action "decrease"}}>
       Down
    </button>                               
<?php }  ?>

item.qnty来自这里：

 {{#each item in salesopportunityitemdata.salesopportunityitems}}

然后在我的控制器中我有：

increase:function() {
  var self = this;
   $(#span1 qnty-bulk).value +=1;
},

decrease:function() {

},

我还在学习Ember的过程中，已经完成了教程 感谢

Answer 1

您需要将控制器的操作相关方法放在控制器内的操作对象（http://emberjs.com/guides/templates/actions/）中，而不是尝试操作DOM，这在emberjs方面是不正确的，请尝试操纵你的模型，如下

    actions: {
      increase:function() {
/*This will probably not work since you item is probably within a specific datastructure,
but the idea is to use get and set to retrieve your model's values and manipulate them. Then emberjs binding will automagically do the rest*/
        this.get('item').set('qnty',this.get('item').get('qnty')+1);
      },

      decrease:function() {

      }
    }

如果您提供用于绑定字段的余烬对象/模型，则可以根据需要对代码进行更具体的说明。

修改

这是你尝试做的一个例子， http://emberjs.jsbin.com/UjAgUha/1/edit

<强> HB

<script type="text/x-handlebars" data-template-name="index">
    <div class="pull-right">{{view Ember.TextField class="span1 qnty-bulk" valueBinding="item.qnty" type="text" disabled=true}}</div>
    <button id="increase" {{action "increase"}}>
       Up
    </button>
    <button id="decrease" {{action "decrease"}}>
       Down
    </button>       
  </script>

<强> JS

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return {item:App.Item.create()};
  }
});

App.IndexController = Ember.ObjectController.extend({
  actions: {
      increase:function() {
var item = this.get('model.item');
        item.get('item');        item.set('qnty',item.get('qnty')+1);
      },
      decrease:function() {
var item = this.get('model.item');
        item.get('item');        item.set('qnty',item.get('qnty')-1);
      }
    }
});

App.Item = Ember.Object.extend({
  qnty:0
});