基於單選按鈕選擇顯示內容

我很新backbonejs，我試圖創建一個基本的應用程序。基於單選按鈕選擇顯示內容

該應用程序是這樣的：

我有5個部分：A, B, C, D and E

每個部分有2個單選按鈕。

Section A - Radio1, Radio2 
Section B - Radio3, Radio4 
Section C - Radio5, Radio6 
Section D - Radio7, Radio8 
Section E - Radio9, Radio10

取決於選擇什麼單選按鈕，我需要顯示部分（前面的章節中也必須顯示）

我有看，也許用一個模型來確定哪些無線電選擇，也顯示哪個部分。這是正確的方法嗎？

來源

2015-08-20 sipher_z

顯示一些代碼。 –

你可以添加更多的細節來決定顯示哪個部分？是否如果選擇* radio1 *然後* b *部分顯示，並且如果* radio2 *然後* section c * ...？需要僅根據單選按鈕顯示部分還是顯示哪個部分？ – Jack

var State = Backbone.Model.extend({ 
    defaults: { 
     id: null, 
     name: "", 
     isOn: false 
    } 
}); 
var Section = Backbone.View.extend({ 
    model: State, 
    events: { 
     'change [type="checkbox"]': function (event) { 
      var $checkbox = $(event.target); 
      this.model.set("isOn", $checkbox.is(":checked")); 
      this.model.get("dispatcher").trigger("toggle", this.model.get("id")); 
     } 
    }, 
    initialize: function (options) { 
     this.listenTo(this.model, "change:isOn", function (model, isOn) { 
      if (isOn) { 
       this.$el.find(".section").show(); 
       this.$el.find("input").prop("checked", true); 
      } 
      else { 
       this.$el.find(".section").hide(); 
       this.$el.find("input").prop("checked", false); 
      } 
     }); 
     this.listenTo(dispatcher, "toggle", function (id) { 
      if (this.model.get("id") < id) { 
       this.model.set("isOn", true); 
      } 
      if (this.model.get("id") > id) { 
       this.model.set("isOn", false); 
      } 
     }); 
    }, 
    render: function() { 
     this.$el.html('<div>' + this.model.get("name") + '</div><input type="checkbox"><div class="section" style="min-height:100px; background-color:grey; display:none;"></div>'); 
     this.$el.appendTo("body"); 
    } 
}); 
var dispatcher = _.extend({}, Backbone.Events); 
_.each([ 
    {id: 1, name: "A", isOn: false, dispatcher: dispatcher}, 
    {id: 2, name: "B", isOn: false, dispatcher: dispatcher}, 
    {id: 3, name: "C", isOn: false, dispatcher: dispatcher}, 
    {id: 4, name: "D", isOn: false, dispatcher: dispatcher}, 
    {id: 5, name: "E", isOn: false, dispatcher: dispatcher} 
], function (item) { 
    var view = new Section({model: new State(item)}); 
    view.render(); 
});

我不明白兩個無線電的意思..所以我用了每節的複選框。希望這將揭示骨幹的一些基本知識。

來源

2015-08-31 09:50:20

我最終做了類似於上面的事情 –

是的，這種方法可行。我建議如果您需要在視圖之間進行通信以通過事件使用模型 - 這通常會導致更好的體系結構（您的視圖將更加分離）。

您可以對視圖中的change事件做出反應（使用events散列）並更新每個組的模型屬性，例如， this.model.set('termsAccepted', true/false)然後只要其他視圖有權訪問此模型，您就可以對該屬性的更改事件作出反應，例如， this.listenTo(this.model, 'change:termsAccepted', this.onTermsAcceptedChange)。

來源

2015-08-20 22:00:06

Dominic Tobias你有什麼例子嗎？正如我所說我對骨幹很新。謝謝 –

可能有一個非常簡單的解決方案，您的目標。如果您通過JavaScript函數監視無線按鈕狀態，則可以使用該函數更改父div的類聲明。在CSS中，您可以根據其類來定義隱藏或顯示div的操作。這隻需要幾行javascript和幾行CSS。例如，this example in codepen顯示了一種完成可變大小div的隱藏/顯示的方法。這種方法中div的數量是任意的 - 您可以隨意選擇多少個div，並且用戶唯一需要的操作是單擊標題展開或摺疊關聯的div。
在此示例中，單擊標題可充當切換以展開或摺疊關聯的div。該示例設置爲一次只展開一個div，並單擊不同的標題會自動摺疊任何打開的div，以便一次只打開一個div。如果你不想要這種行爲，只需刪除accOff()函數中的for循環即可。

來源

2015-08-26 20:55:54

它有點像選擇你自己的冒險，亞sipher_z？

我建議使用骨幹路由器和路由參數來存儲當前狀態，也就是說，哪一部分當前正在顯示。

該視圖的每個組件應該是Backbone.View.extend({...})。組件可能是Section和Radio。

在HTML中的每個單選按鈕上，放置一個data-go-to屬性，並將該節的值指向下一個。然後，在您的RadioView代碼中，輸入點擊事件。點擊後，解壓縮此data-go-to，並執行類似location.hash = '/section/' + section觸發您的路由器。

然後，你所有的路由器都會在觸發時隱藏除選定部分之外的所有部分。如果沒有選擇，它只顯示第一個！

我不是100％肯定這個策略，但這絕對是「骨幹的方式」。讓我知道，如果我能清除任何東西。

來源

2015-08-30 00:17:41

基於單選按鈕選擇顯示內容

回答

相關問題