FineUI + Knockout 实现数据绑定 2 - FineUI 官方论坛

@page
@model FineUICore.EmptyProject.RazorPages.Pages.KnockoutModel
@{
ViewBag.Title = "Knockout";
var F = @Html.F();
}
@section body {
<table id="goods" class="table">
<thead>
<tr>
<td scope="col">#</td>
<td scope="col">名称</td>
<td scope="col">单位</td>
<td scope="col">数量</td>
<td scope="col">单价</td>
<td scope="col">合计</td>
<td scope="col">操作</td>
</tr>
</thead>
<tbody>
<tr>
<td scope="row"><span data-bind="text:$index()+1"></span></td>
<td>
<div data-bind="ui:{options:{type:'dropdownlist',data:$parent.goodsNames,width:100}, value:$data.name}"></div>
</td>
<td>
<div data-bind="ui:{options:{type:'dropdownlist',data:$parent.goodsUnits,width:100}, value:$data.unit}"></div>
</td>
<td>
<div data-bind="ui:{options:{type:'numberbox',width:100}, value:$data.count}"></div>
</td>
<td>
<div data-bind="ui:{options:{type:'numberbox',width:100}, value:$data.unitPrice}"></div>
</td>
<td>
<div data-bind="ui:{options:{type:'label',width:60}, text:'￥'+$data.totalPrice()}"></div>
</td>
<td>
<div data-bind="ui:{options:{type:'button', text:'删除商品'}, click:function(){$parent.goodsList.remove($data)}}"></div>
</td>
</tr>
<tr>
<td colspan="6" style="text-align:right">总价</td>
<td><span data-bind="text:'￥'+total()"></span></td>
</tr>
</tbody>
</table>
<f:Panel Title="Knockout" ContentEl="#goods" BodyPadding="15" IsFluid="true">
<Toolbars>
<f:Toolbar>
<Items>
<f:Button Text="添加商品" AttributeDataTag="f:{click:add}"></f:Button>
<f:Button Text="生成JSON" AttributeDataTag="f:{click:json}"></f:Button>
</Items>
</f:Toolbar>
</Toolbars>
</f:Panel>
<br />
<h5 data-bind="visible:goodsList().length>0">商品JSON</h5>
<div data-bind="text:goodsJson,visible:goodsList().length>0"></div>
}
@section script {
<script src="~/knockout-3.5.1/knockout.js"></script>
<script src="~/res/js/knockout-fineui.js"></script>
<script>
F.ready(function () {
$('[data-tag]').each(function () {
$(this).attr('data-bind', $(this).data('tag'));
});
function Goods() {
var self = this;
self.name = ko.observable('1');
self.unit = ko.observable('1');
self.count = ko.observable(1);
self.unitPrice = ko.observable(3450);
self.totalPrice = ko.pureComputed(function () {
return self.unitPrice() * self.count();
});
};
function ViewModel() {
var self = this;
self.goodsNames = [
['1', '台式电脑'],
['2', '笔记本'],
['3', '硬盘'],
['4', '内存条'],
['5', '光盘']
];
self.goodsUnits = [
['1', '台'],
['2', '块'],
['3', '条'],
['4', '个'],
['5', '张']
];
self.goodsList = ko.observableArray();
self.goodsJson = ko.observable();
self.total = ko.pureComputed(function () {
var total = 0;
for (var goods of self.goodsList()) {
total += goods.totalPrice();
}
return total;
});
self.add = function () {
self.goodsList.push(new Goods());
}
self.json = function () {
self.goodsJson(ko.toJSON(self.goodsList));
};
};
ko.applyBindings(new ViewModel());
});
</script>
}

复制代码