Ich benutze ko.mapping-Dienstprogramm, um mein mvc-Modell an knockoutjs zu binden. Mein MVC-Modell ist dasKnockout-Mapping von MVC
public class Person
{
public string Name { get; set; }
public string Surname { get; set; }
public Achievement[] achievements { get; set; }
}
public class Achievement
{
public string Title { get; set; }
public int Score { get; set; }
}
public ActionResult Index()
{
Person person = new Person
{
Name = "Name",
Surname = "Surname",
achievements = new Achievement[]
{
new Achievement { Title="Ach 1", Score=10 },
new Achievement { Title="Ach 2", Score=11 },
new Achievement { Title="Ach 3", Score=12 },
}
};
return View(person);
}
ich mein Javascript-Modell möchte einige zusätzliche Eigenschaften enthalten sowohl in Person und Achievement-Objekte so verwende ich Knockout-Mapping-Plugin und schreiben nur die neuen Eigenschaften in JavaScript (Person.fullName und Leistung. Botschaft).
@{
string theData = new JavaScriptSerializer().Serialize(Model);
}
<div>
<div><label>Name </label> <span data-bind="text:Name"></span></div>
<div> <label>Surname </label> <span data-bind="text:Surname"></span> </div>
<div> <label>Full Name </label> <span data-bind="text:fullName"></span></div>
<ul data-bind="foreach:achievements">
<li>
<span data-bind="value:Title" />
<span data-bind="text:Score"></span>
<span data-bind="text:Message"></span>
</li>
</ul>
</div>
<script type="text/javascript">
personViewModel = function (data) {
var self = this;
ko.mapping.fromJS(data, {}, self);
self.fullName = ko.computed(function() {
return self.Name() + " " + self.Surname();
});
}
achievement = function (data) {
var self = this;
ko.mapping.fromJS(data, {}, self);
self.Message = ko.computed(function() {
return self.Title() + " " + self.Score();
});
}
ko.applyBindings(new personViewModel(@Html.Raw(theData)));
</script>
Das Problem ist, dass die Leistungsklasse überhaupt nicht zugeordnet ist. Was ist der richtige Weg, Daten von MVC-Controller zu laden, ohne das Modell in C# und in Javascript zweimal zu schreiben.
ich Ihren Code versucht, und ich erhalte diesen Fehler. 'Titel ist nicht definiert'. – albert
@albert Versuchen Sie, self.Message auskommentieren und sehen, ob es funktioniert? Um die Dinge einfacher zu machen, können Sie den Code in der Chrome-Konsole debuggen, break point it –
Die create-Funktion erhält nicht das gesamte Array, sondern seine einzelnen Elemente. Verwenden Sie 'create: function (Optionen) {return new achievement (options.data)}' (Beispiel: https://jsfiddle.net/8ma2Lg12/) – user3297291