2012-10-22 81 views
5

總之,我相信我是後綁定的方式來提供範圍/上下文淘汰賽綁定/ JavaScript對象在MVC4局部視圖,這樣我就可以重複使用相同的部分,而不必去幹預彼此之間,但仍然能夠在客戶端引用父子視圖模型。淘汰賽中MVC4局部視圖

這很可能是一個淘汰賽小白(和真正的web開發更廣泛地說)我在這裏缺少一個共同JavaScript的概念模式,但我跑入場景很像以下。我在服務器上有一個視圖模型,讓我們這樣說:

public class MainModel 
{ 
    // Other fields 

    SubviewModel Subview { get; set} 
} 

public class SubviewModel 
{ 
    // Relevant subview fields 
} 

然後在強類型(主)部分觀點我渲染什麼,我需要,並通過子視圖模型轉換成一個強類型的部分(上服務器)通過@ Html.Action。在這兩種情況下,我做這樣的事情建立淘汰賽:

var mvcModel = ko.mapping.fromJS(@Html.Raw(JsonConvert.SerializeObject(this.Model))); 

ko.applyBindings(mvcModel , document.getElementById("@("divSubview"+Model.Guid)")); 

在這種情況下divSubview將是部分主包裝股利和一般的一切結合得很好 - 差不多。

的Model.Guid級聯是有解決的第一個問題,這是這些諧音一般呈現幾個針對不同的ViewModels在頁面上。 (把它看作一個項目列表,一個待辦事項列表或者是什麼,每個項目都有可能改變的子內容 - 你可能會想到,可能在我試圖進一步解釋之前......)所以當多個部分在同一頁面上呈現時,如果div不是唯一命名的,如果我通過document.getElementById調用applyBindings,則最終將第二個viewModel應用於具有該名稱的第一個呈現的div。

第二個問題是相關的,因爲當我渲染主要部分(對於給定頁面有多個),然後是子視圖時,我經常要引用子視圖中的主視圖模型或類似。我一直在使用的解決方法是設置一個命名的全局參數,然後使用它來回引用,因爲我知道該腳本將按順序執行 - 但這很不方便。

那麼,什麼是我缺少合適的解決方案?

我知道我可以使用Knockout的模板和一個更大的視圖模型,最終這可能是正確的解決方案,但現在MVC部分(緊密耦合到服務器)有很多事情,我是不捨得放棄。 (其次,我試圖儘量保持部分儘可能鬆散耦合 - 至少在客戶端 - 即使我在綁定/等等方面性能受到影響)

什麼(我認爲)我真的是後通過某種形式的範圍諧音,這樣子視圖部分將不得不主要部分視圖模型參考的方式(同樣地),而不必污染全局命名空間,或使用唯一的名稱。有沒有一種方法可以讓我說出一個客戶端JS變量,該變量可以引用子/父部分中的對象? (或者我完全錯過了這一點,還有更好的辦法嗎?)

+1

嘗試使用模板綁定 –

+0

那麼你到底用了什麼? –

+0

我實際上最終選擇了Angular,但這與我所尋找的內容有點無關。總的來說,雖然我認爲你是正確的,那就是使用客戶端表示的「經典」組合來綁定所有事情(這是大多數JS框架無論如何都會產生的結果),所以我會給你點頭。欣賞輸入! – Gene

回答

1

長期來說,它真的可能是最好的咬住子彈並使用映射插件的經典組合,頂級視圖的JSON表示模型渲染到頁面中進行初始化,以及子視圖模型的模板。但是,我理解你的痛苦重新現有的MVC部分邏輯,所以......

您目前呈現一個獨立的腳本塊的每個子部分的視圖中創建的淘汰賽視圖模型,並運用其綁定的一部分嗎?

您是否可以避免使用單個綁定上下文,並在頁面中定義某種模塊,該模塊擁有頂級視圖模型,並且其子視圖模型會隨着子部分渲染而逐步添加到其中,然後在在DOM準備好的頁面底部應用綁定?

因此,每個子部分的腳本塊都會調用模塊中的某個函數,並傳遞子模型的原始JSON(包括其Guid鍵)。然後,您的模塊創建一個新的子視圖模型實例,並將父視圖模型設置爲其中的引用,並將其推入父視圖模型中的可觀察的子視圖模型數組。然後你有每個方面的參考。

我不確定你可以繞過這種結構的某種頁面級別管理器(如果這就是你的意思,不污染全局名稱空間)。在任何情況下,讓這些局部視圖模型全部由單個對象擁有而不是在全局名稱空間中浮動是不是很好? (如果是的話)

希望我正確理解你的上下文。

更新:從某種意義上說,您的部分仍然是鬆散耦合的。標記中的綁定表達式顯然必須與一個子視圖模型的實例相關,但這可能是通過您的待辦事項列表項目或其他任何內容的foreach鏈接的數據上下文,或者使用「with」表達式顯式設置,例如with someOtherModule.randomStandaloneSubViewModel