Usando Knockout.js com os mais novos arquivos jQuery e asp.net MVC
-
26-09-2019 - |
Pergunta
Estou tentando usar o Knockout.js com o ASP.NET MVC 3.0 (o título doou, não foi?!)
Estou enfrentando alguns problemas (mais relacionados ao novo mecanismo JQuery TMPL do que o ASP.NET MVC 3.0).
Estou usando o programa de exemplo de Steve Sanderson no meu teste e tenho majoritariamente replicaram seus resultados com o novo mecanismo de visualização de barbear (eu não acredito que Razor tenha algo a ver com o meu problema).
http://blog.stevensanderson.com/2010/07/12/editing-a-variable-listch-list-knockout-tyle/
No entanto, eu quero fazer mais com o natural A ligação do jQuery, em vez dos atributos de ligação HTML. Isso é descrito em detalhes sobre o tutorial do knockout.http://knockoutjs.com/documentation/template-binding.html
No entanto, não consigo reproduzir isso como explica. Vou mostrar abaixo do meu código de visualização. Meu problema está vindo do fato de que {{foreach (i, gift) gifts}}
não funciona. Eu tentei muitas variantes ( {{foreach (i, gift) gifts()}}
como eu vi em outros exemplos).
Estou usando o Mais recentes knockout.js
Arquivo. estou usando jQuery 1.4.3.
estou usando http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js
para o motor de modelos. No entanto, eu também tentei isso usando o mesmo tmpl.js
Arquivo incluído no site do Knockous.js e eu recebo os mesmos resultados.
Ao usar o JQuery Modelating, de acordo com a especificação atual, o modelo não renderiza.
A documentação das tags de modelo jQuery é encontrada aqui: http://api.jquery.com/category/plugins/templates/template-tags/
Caso alguém esteja confuso sobre o meu modelo exato. Se eu substituir {{foreach (i, gift) gifts}}
com {{foreach gift}}
, então o modelo se renderiza e se comporta corretamente, mas não posso usar o nativo jQuery ${property}
declarações para qualquer coisa.
Html
@model IEnumerable<Knockout.GiftModel>
@using System.Web.Script.Serialization;
@{
View.Title = "Index";
Layout = "~/Views/Shared/_Site.cshtml";
}
<h2>Gift list editor</h2>
<form class="giftListEditor" action="/home/index" method="post" >
<table>
<tbody data-bind="template:'giftRowTemplate'"></tbody>
</table>
<button data-bind="click: addGift">Add Gift</button>
<button data-bind="enable: gifts().length > 0" type="submit">Submit</button>
</form>
<script type="text/html" id="giftRowTemplate">
{{each (i, gift) gifts}}
<tr>
<td>Gift name: <input class="required" data-bind="value: Title, uniqueName: true" /> ${Title} </td>
<td>Price: $ <input class="required number" data-bind="value: Price, uniqueName: true"/></td>
<td><a href="#" data-bind="click: function() { viewModel.removeGift( $value ) }">Delete</a></td>
</tr>
{{/each}}
</script>
<script type="text/javascript">
var initialData = @(new HtmlString(Model.ToJson()));
var viewModel = {
gifts: ko.observableArray(initialData),
addGift: function () {
this.gifts.push({ Title: "", Price: "" });
},
removeGift: function (gift) {
this.gifts.remove(gift);
},
save: function () {
ko.utils.postJson(location.href, { gifts: this.gifts });
}
};
ko.applyBindings(viewModel);
$("form").validate({ submitHandler: function() { viewModel.save() } });
</script>
Solução
Eu abordaria isso de maneira diferente. Eu usaria a seguinte linha:
<tbody data-bind='template: { name: "giftRowTemplate", foreach: gifts }'></tbody>
ao invés de:
<tbody data-bind="template:'giftRowTemplate'"></tbody>
Assim você não precisa usar o {{each (i, gift) gifts}}
linha no modelo que está lhe dando problemas.
Outras dicas
{{each gifts}}
ao invés de {{each (i, gift) gifts}}
vai fazer o truque.