Question

嘿，我的ember应用程序中有两个不同的问题，这两个问题都涉及绑定。

首先，当我不想要它时，我有一个绑定触发器。基本上我正在努力实现（我正在构建调查创建者前端应用程序）是当任何文本输入到问题的“名称”字段时，我想添加一个新的问题对象，它将呈现在用户添加的问题列表的末尾输出另一个空白问题。这具有始终存在新问题的效果，因此不需要添加问题按钮。绑定正在工作，并且正在添加一个新对象：但是，由于绑定来自最新的问题对象，因此在创建新对象时会再次触发绑定，从而创建一个新对象，再次触发绑定....显然最终崩溃了浏览器。我已经尝试过使用Ember._suspendObserver函数，但是没有很多关于这个的文档，我认为我使用它错了 - 无论如何它不是暂停观察者或暂停绑定。代码中的观察者位于第27行（contentsNameObserver）

我遇到的另一个问题 - 我有一个选择下拉框，用于选择用户想要的问题类型（单一答案，多项选择等），但是选择框和{{之间的绑定#each}}帮助器呈现的问题类型没有触发。我正在使用Ember.Select视图助手，因此使用get / set来触发绑定应该没有任何问题。我正在使用计算属性根据问题类型id的值返回问题类型的字段数组。计算属性在第13行（App.SurveyContent.types）和模板templates / step3中。快速提醒这个应用程序可以延伸超过调查，因此“问题”通常在代码中被称为“内容”。

我对ember很新（这是我的第一个真正的应用程序）所以我的代码很可能在这些问题之外有很多问题......所以对我如何构建我的应用程序的任何评论都将非常感激还有！

Javascript ember app：

App = Ember.Application.create({
  rootElement: '#emberContainer'
});

App.SurveyContent = Ember.Object.extend({
  name: "",
  content_type: 1,
  content_pos: 1,
  hash: Em.A([]),

  types: function() {
    alert("redraw");
    return App.ContentTypes[this.content_type-1].hash;
  }.property()

});

App.Surveys = Ember.Object.create({
  name: null,
  start: $.datepicker.formatDate('mm/dd/yy' , new Date()),
  end: $.datepicker.formatDate('mm/dd/yy' , new Date()),
  themeID: 0,
  contents: [App.SurveyContent.create()],    //Pushing an instance of App.SurveyContent onto this

  contentsNameObserver: function() {
    context = this;
    console.log("entering");
    Em._suspendObserver(App.Surveys, "contents.lastObject.name", false, false, function() {
      console.log("suspend handler");
      context.contents.pushObject(App.SurveyContent.create());
    })
  }.observes("contents.lastObject.name")

});

App.ContentTypes = [
  Ember.Object.create({name: 'Text question', id:1, hash: [Ember.Object.create({name: 'Question', help: 'Enter the question here', type: 'text'})]}),

  Ember.Object.create({name: 'Multichoice question', id:2, hash: [Ember.Object.create({name: 'Question', help: 'Enter the question here', type: 'text'}), 
                        Ember.Object.create({name: 'Answer', help: 'Enter possible answers here', type: 'text', multiple: true})]})
];

App.ViewTypeConvention = Ember.Mixin.create({
  viewType: function() {
    console.log(this);
    return Em.get("Ember.TextField");
  }.property().cacheable()
});


App.CRMData = Ember.Object.extend();

App.CRMData.reopenClass ({
  crm_data: [],
  org_data: [],
  org_display_data: [],

  loadData: function() {
    context = this;
    context.crm_data = [];
    $.getJSON ("ajax/crm_data", function(data) {
      data.forEach(function(crm) {
        context.crm_data.pushObject(App.CRMData.create({id: crm.crm_id, name: crm.crm_name}));
        crm.orgs.forEach(function(org) {
          context.org_data.pushObject(App.CRMData.create({id: org.org_id, name: org.org_name, crm_id: crm.crm_id}));
        }, context)
      }, context)
      context.updateOrganisations(5);
    }); 
    return this.crm_data;
  },
  updateOrganisations: function(crm_id) {
    context = this;
    this.org_display_data.clear();
    console.log("clearing the buffer")
    console.log(this.org_display_data)
    context.org_data.forEach(function(org) {
      if(org.crm_id == crm_id) {
        context.org_display_data.pushObject(App.CRMData.create({id: org.id, name: org.name}));
      }
    }, context)
  }
});

App.DateField = Ember.TextField.extend({
  attributeBindings: ['id', 'class']
});

App.CRMSelect = Ember.Select.extend({
  attributeBindings: ['id'],
  change: function(evt) {
    console.log(evt)
    App.CRMData.updateOrganisations($('#crm').val())
  }
});

App.ApplicationController = Ember.Controller.extend();

App.Step1Controller = Ember.ArrayController.extend({});

App.Step2Controller = Ember.ArrayController.extend({});

App.Step2Controller = Ember.ArrayController.extend({});

App.ApplicationView = Ember.View.extend({
  templateName: 'app'
});

App.Step0View = Ember.View.extend ({
  templateName: 'templates/step0'
});

App.Step1View = Ember.View.extend ({
  templateName: 'templates/step1'
});

App.Step2View = Ember.View.extend ({
  templateName: 'templates/step2',
  didInsertElement: function() {
    $( ".jquery-ui-datepicker" ).datepicker();
  }
});

App.Step3View = Ember.View.extend ({
  templateName: 'templates/step3',
});



App.Router = Em.Router.extend ({
  enableLogging: true,

  root: Em.Route.extend ({
    showstep1: Ember.Route.transitionTo('step1'),
    showstep2: Ember.Route.transitionTo('step2'),
    showstep3: Ember.Route.transitionTo('step3'),

    index: Ember.Route.extend({
      route: '/',
      connectOutlets: function(router){
        router.get('applicationController').connectOutlet( 'step0');
      }      
    }),

    step1: Ember.Route.extend ({
      route: 'step1',
      connectOutlets: function(router){
        router.get('applicationController').connectOutlet( 'step1', App.CRMData.loadData());
      }
    }),

    step2: Ember.Route.extend ({
      route: 'step2',
      connectOutlets: function(router) {
        router.get('applicationController').connectOutlet('step2')
      },
    }),

    step3: Ember.Route.extend ({
      route: 'step3',
      connectOutlets: function(router) {
        router.get('applicationController').connectOutlet('step3')
      },
    })
  })
});


Ember.LOG_BINDINGS=true;

App.LOG_BINDINGS = true;

App.ContentTypes.forEach(function(object) {
  object.hash.forEach(function(hash) {
    hash.reopen(App.ViewTypeConvention);
  }, this);
}, this);

Html模板（我在haml中有这些，所以这只是重要的表示）

<script  type="text/x-handlebars" data-template-name="app"> 
{{outlet}}
</script>

<script  type="text/x-handlebars" data-template-name="templates/step3"> 
<h1> Add content to {{App.Surveys.name}} </h1>
<br>

<div id = "accordion2" class = "accordion">
  {{#each content in App.Surveys.contents}}
  <div class="accordion-group">
    <div class = "accordion-heading">
      <a class = "accordion-toggle" data-parent = "#accordion2" data-toggle = "collapse" href = "#collapseOne">
        {{content.name}}
      </a>
    </div>  
    <div id = "collapseOne" class = "accordion-body collapse in">
      {{view Ember.TextField valueBinding="content.name" class="txtName"}}
      <form class = "form-horizontal">
        <div class = "accordion-inner">
          <div class = "control-group">
            <label class = "control-label" for ="organisation"> 
              Content Type
              <div class = "controls">
                {{view Ember.Select contentBinding="App.ContentTypes" optionValuePath="content.id" optionLabelPath="content.name" valueBinding="content.content_type"}}
              </div>  
            </div>  
          </div>  
          {{#each item in content.types }}
          <div class = "control-group" >
            <label class = "control-label" for = "organisation">
              {{item.name}}
              <div class = "controls">
                {{view item.viewType }}
              </div>  
          {{/each}}
          </div>  
      </form> 
    </div> 
  {{/each}}
  </div>
</div>

<br>

<div class = "btn" {:_action => 'showstep3'}>  Next Step > </div>
</script>

Answer 1

我已经解决了第一个问题，虽然我没有得到suspendObserver属性，但是我使用了if语句检查前一个元素，删除了无限循环。

contentsNameObserver: function() {
  context = this;
  if(this.get('contents.lastObject').name) {
    context.contents.pushObject(App.SurveyContent.create());  
  }
}.observes("contents.lastObject.name")

关于如何让_suspendObserver处理程序正常工作的任何评论都会受到赞赏，但它应该可行，但我做错了

我在http://jsfiddle.net/reubenposthuma/sHPv4/

创建了一个精简的jsfiddle

设置为直接进入问题步骤，步骤3，这样我就不需要包含所有以前的模板。

我仍然坚持绑定没有解雇的问题。我期待的行为是，当“内容类型”下拉框更改时，下面的文本框应该更改，它应该使用两个文本框重新呈现。

Answer 2

我意识到这是一个古老的问题，但是没有任何文件和宝贵的小信息我也可以找到，因此分享我在这里找到的工作。

我发现的工作是致电Ember._suspendObserver如下：

somePropertyDidChange: function(key) {
  var that = this;

  Ember._suspendObserver(this, key, null,
    'somePropertyDidChange', function() {

    // do stuff which would normally cause feedback loops
    that.set('some.property', 'immune to feedback');
  });
}.observes('some.property');

您还可以使用多个观察者变体，如下所示：

somePropertiesDidChange: function(key) {
  var that = this;
  Ember._suspendObservers(this, ['some.property', 'another.property'],
    null, 'somePropertiesDidChange', function() {

    // do stuff which would normally cause feedback loops
    that.set('some.property', 'immune to feedback');
    that.set('another.property', 'also immune to feedback');
  });
}.observes('some.property', 'another.property');

在我的确切用例中，我实际上是从Ember._suspendObservers函数调用了Ember.run.once()，这是由观察者设置的，因为我想确保在进行计算之前已经确定了许多依赖属性，改变其中的一些属性。

Ember绑定在不需要时触发，并且在需要时不触发

2 个答案: