mvvm - KnockOutJS - 在單個視圖中顯示多個ViewModels





knockout.js data-binding knockout-mapping-plugin (5)


我們使用組件來實現這一點。 ( http://knockoutjs.com/documentation/component-overview.html

例如,我們正在開發這個組件庫: https://github.com/EDMdesigner/knobjshttps://github.com/EDMdesigner/knobjs

如果您深入了解代碼,您會看到例如我們在多個地方重複使用了旋鈕按鈕組件。

我在想我的應用程序現在變得非常大,太大而無法用一個ViewModel來處理每個View。

所以我想知道創建多個ViewModel並將它們全部加載到一個View中是多麼困難。 注意我還需要能夠將X ViewModel數據傳遞給Y ViewModel數據,因此各個ViewModel需要能夠彼此進行通信或者至少知道對方。

例如,我有一個<select>下拉菜單,選擇下拉菜單有一個選定的狀態,它允許我將<select>所選項目的ID傳遞給另一個Ajax調用,在另一個ViewModel中......

在單個視圖中處理眾多ViewModel的任何觀點都將得到讚賞:)




如果他們都需要在同一個頁面上,一個簡單的方法就是讓主視圖模型包含其他視圖模型的數組(或屬性列表)。

masterVM = {
    vmA : new VmA(),
    vmB : new VmB(),
    vmC : new VmC(),
}

然後,如果需要,您的masterVM可以具有其他屬性,對於頁面本身。 在這種情況下,視圖模型之間的通信並不困難,因為您可以通過masterVM中繼,也可以在綁定中使用$parent / $root或其他一些自定義選項。




Knockout現在支持多種模型綁定。 ko.applyBindings()方法接受一個可選參數 - 綁定將被激活的元素及其後代。

例如:

ko.applyBindings(myViewModel, document.getElementById('someElementId'))

這將激活限制為ID為someElementId及其後代的元素。

請參閱documentation了解更多詳情







我在GitHub頁面上有一個自定義的開源FrameworkElement ,允許您在主要內容上顯示模態內容。

控件可以像這樣使用:

<c:ModalContentPresenter IsModal="{Binding DialogIsVisible}">
    <TabControl Margin="5">
            <Button Margin="55"
                    Padding="10"
                    Command="{Binding ShowModalContentCommand}">
                This is the primary Content
            </Button>
        </TabItem>
    </TabControl>

    <c:ModalContentPresenter.ModalContent>
        <Button Margin="75"
                Padding="50"
                Command="{Binding HideModalContentCommand}">
            This is the modal content
        </Button>
    </c:ModalContentPresenter.ModalContent>

</c:ModalContentPresenter>

特徵:

  • 顯示任意內容。
  • 在顯示模態內容時不禁用主要內容。
  • 在顯示模態內容時禁用對主要內容的鼠標和鍵盤訪問。
  • 僅對其所涵蓋的內容進行模態處理,而不是整個應用程序。
  • 可以通過綁定到IsModal屬性以MVVM友好的方式使用。




mvvm knockout.js data-binding knockout-mapping-plugin