雙向綁定符使用jQuery用戶界面對話框

這裏的時候，是我的路線：雙向綁定符使用jQuery用戶界面對話框

ExtractCreator.Router.map(function() { 
    this.route('filter', { path: '/' }, function() { 
     this.route('geog_levels'); 
    }); 
});

這是我的看法，其創建jQuery用戶界面彈出：

ExtractCreator.FilterGeogLevelsView = Ember.View.extend({ 
didInsertElement : function(){ 
    var controller = this.controller; 
    $('#filter-dialog').dialog({ 
     modal:true, 
     stack: false, 
     title: "Geogography Levels Filter", 
     close: function(e,ui) { 
      controller.transitionToRoute('filter'); 
     }, 
    }).dialog("moveToTop"); 
} 
});

而且模板：

 {{#each geog_level_group in model}} 
      <h3>{{geog_level_group.label}}</h3> 
      {{#each geog_level_filter in geog_level_group.geog_level_filters}} 
      <div {{bind-attr class="geog_level_filter.disabled?:disabled"}}> 
       <label>{{geog_level_filter.label}} - {{geog_level_filter.id}}</label> 
       {{input type="text" value=geog_level_filter.label }} 
      </div> 
      {{/each}} 
     {{/each}}

我將輸入綁定到模板中的模型，但每當我在輸入字段中鍵入任何內容時，它都不會更新e在頁面的任何其他地方，也不會顯示爲在我的（chrome）餘燼檢查器的模型視圖中更新的。

如果我從ember inspector手動更改值，那麼它會正確更新彈出窗口內部。

如果我將它從彈出窗口中取出（或者只是刪除彈出窗口代碼），那麼所有東西都可以正確綁定，並且在更改輸入值時標籤將會更新。

如何從對話框中獲得正確的綁定行爲？

來源

2014-12-23 Jacob Wellington

你可以做一個最小的JSBin（或類似的）複製？ [這一個作品]（http://emberjs.jsbin.com/qazacileta/2/edit），但你分享的代碼缺少一些細節，如模型的細節。 –

事實證明，沒有發生結合的原因是jQuery的用戶界面對話框的功能被附加了「＃過濾器對話框中的」元素爲：您可以通過修改代碼如下做到這一點身體標記，但在創建我的Ember應用程序時，我使用「rootElement」選項將Ember的範圍限制爲另一個ID爲「extract-creator」的div。

我的應用程序創建代碼：使用

ExtractCreator = Ember.Application.create({ 
    rootElement: '#extract-creator' 
});

的appendTo選項創建對話框的時候，我可以在灰燼應用程序的範圍內保持：

ExtractCreator.FilterGeogLevelsView = Ember.View.extend({ 
didInsertElement : function(){ 
    var controller = this.controller; 
    $('#filter-dialog').dialog({ 
     modal:true, 
     stack: false, 
     title: "Geogography Levels Filter", 
     appendTo: "#extract-creator", 
     close: function(e,ui) { 
      controller.transitionToRoute('filter'); 
     }, 
    }).dialog("moveToTop"); 
} 
});

另一種解決辦法已經從Ember創建選項散列中刪除「rootElement」行，使其缺省爲body標籤。

特別感謝Buck Doyle在評論中發佈了一個可用的JSBin。

來源

2014-12-29 16:42:18

那麼我面臨一次相同的奇怪的行爲和問題可能是由於didInsertElement與子視圖。（是的，你有一些如何使用每個視圖和一個ember {{input}}，這也是一個視圖）。

可以解決您的問題的一種方法是在ember完成渲染隊列中的所有內容後運行您的模態。

didInsertElement : function(){ 
var controller = this.controller; 
Ember.run.scheduleOnce('afterRender', this ,function(){ 
    $('#filter-dialog').dialog({ 
    modal:true, 
    stack: false, 
    title: "Geogography Levels Filter", 
    close: function(e,ui) { 
     controller.transitionToRoute('filter'); 
    },}).dialog("moveToTop"); 
}); 
}

來源

2014-12-24 01:18:26 MrVinz

雙向綁定符使用jQuery用戶界面對話框

回答

相關問題