2012-02-14 27 views
0

也許對於我的問題有一個簡單的解決方案,但我似乎無法找到它。我已經閱讀了很多關於Knockout的教程,所以我得到了基礎知識,但我問這個問題,因爲我的實體結構比名稱和朋友列表的人更復雜一些,這些人可能會或可能不會在Twitter (Video在Channel9上:Helping you build dynamic JavaScript UIs with MVVM and ASP.NET。這裏是我的情況:用屬性列表創建對象並將其傳遞給控制器​​

我有一個類PersonnelClass這種基本結構:

[Serializable] 
//The interface is for the implementation of 'Name' and 'Description' 
public class PersonnelClass : IPersonnelClassOrPerson 
{ 
    public PersonnelClass() : this(Guid.NewGuid(), "", "") { } 

    public PersonnelClass(Guid id, String name, String description = null) 
    { 
     if (id == Guid.Empty) { throw new ArgumentNullException("id"); } 
     Id = id; 
     Name = name; 
     Description = description; 
     Properties = new PropertyCollection(); 
    } 

    public Guid Id { get; private set; } 
    public String Name { get; set; } 
    public String Description { get; set; } 
    public PropertyCollection Properties { get; private set; } 
} 

PropertyCollection類及相關AbstractProperty類是這樣的:

[Serializable] 
public class PropertyCollection: List<AbstractProperty> { } 

[Serializable] 
public abstract class AbstractProperty: IEntity, IProperty 
{ 
    public AbstractProperty(String name, String description = null) : this(Guid.NewGuid(), name, description) { } 

    public AbstractProperty(Guid id, String name, String description = null) 
    { 
     if (id == Guid.Empty) { throw new ArgumentNullException("id"); } 
     if (String.IsNullOrEmpty(name)) { throw new ArgumentNullException("name"); } 
     Id = id; 
     Name = name; 
     Description = description; 
    } 

    public Guid Id { get; private set; } 
    public String Name { get; private set; } 
    public String Description { get; private set; } 
} 

在我的控制,我創建的PersonnelClassViewModel具有這種結構的實例:

public class PersonnelClassViewModel 
{ 
    public PersonnelClass PersonnelClass { get; set; } 
    public List<AbstractProperty> Properties { get; set; } 
} 

我填這個視圖模型與新PersonnelClass和兩個測試性能通過我的看法是這樣:

var properties = new List<AbstractProperty> 
{ 
    new TextProperty("prop1", "descr1"), 
    new TextProperty("prop2", "descr2") 
    //TextProperty is derived from AbstractProperty 
}; 
var vm = new PersonnelClassViewModel { Properties = properties }; 
return View(vm); 

我在我的視圖中得到了所有我想要的東西。從視圖我想創建一個新的PersonnelClass與一組選定的屬性。我有名稱和描述的字段,並添加屬性我有一個ListBox與已存在的屬性(爲演示目的,他們來自控制器現在)。通過一些Knockout JavaScript代碼,我可以從這個列表中選擇項目,並使用選定的屬性填充HTML選擇控件()以添加到PersonnelClass中。這一切工作正常,直到我想建立一個對象回傳給Controller並創建PersonnelClass。

我的問題是:什麼淘汰賽JS代碼來建立這個對象,並通過提交表單,並在我的控制器將它傳遞給控制器​​我應該怎麼得到這個對象,這意味着需要:什麼類型的對象要這樣的be(PersonnelClass,PersonnelClassViewModel,...)?

如果需要更多信息/代碼,請不要問。提前致謝! 「B Z」的答案後

更新:

我跟着幾個史蒂芬·桑德森的這個教程,以確保我理解這一點,尤其是你在你的答案提供了一個。現在,我已經在我看來,下面的代碼開始:

var initialData = @Html.Raw(new JavaScriptSerializer().Serialize(Model)); 

var viewModel = { 
    personnelClassViewModel : ko.mapping.fromJS(initialData), 
    properties : personnelClassViewModel.Properties, 
    selectedProperties : ko.observableArray([]), 
    addedProperties : ko.observableArray([]) 
}; 

ko.applyBindings(viewModel); 

變量「initialData」包含我希望它有,但後來我得到以下錯誤的值:

Microsoft JScript runtime error: 'personnelClassViewModel' is undefined

我沒有線索了。誰能幫我解決這個問題嗎?

回答

1

史蒂芬·桑德森對如何與可變長度列表的工作爲例,knockoutjs

http://blog.stevensanderson.com/2010/07/12/editing-a-variable-length-list-knockout-style/

說了這麼多,我覺得你的問題是沒有這麼多的淘汰賽側更加上如何在服務器端正確綁定數據。在上面的鏈接,史蒂芬使用FromJson屬性模型綁定,你可能會發現有用...

HTH

+0

謝謝,您給定的例子讓我在路上了一下。但請回顧我更新的問題。 – Abbas 2012-02-15 14:19:20

+1

@Abbas認爲如果你有一個新的問題,提出一個新的問題將有助於你獲得更多的回答。 – 2012-02-20 01:04:21

+0

你可能是對的。對於最初的問題,你的回答很有幫助,所以我將其標記爲答案。問題幾乎沒有完全解決,但這可能是另一個問題。非常感謝您的幫助,非常感謝! :) – Abbas 2012-02-20 14:01:08

相關問題