1
我试图用typeahead（twitter bootstrap）实现一个自动填充的输入字段。这个自动填充字段应该是一个模式，但我似乎无法让它工作！它也必须是可观察的，因为当你选择一个值时，其他字段应该被更新。在Durandal框架中使用Typeahead创建一个自动填充字段
所以我有点想在模态中做到这一点！
HTML
<div class="messageBox">
<div class="modal-header">
<h2>Adding a repairline</h2>
</div>
<div class="modal-body" style="width: 35em;">
<form data-bind="submit: ok">
<fieldset>
<!--<legend></legend> Deze niet toevoegen uitlijning is dan niet goed!-->
<div class="row-fluid">
<div class="span6">
<div>
<label>
Description:
<input type="text" id="testen" data-provide="typeahead" />
</label>
</div>
<div>
<label>
Code:
<input data-bind="value: Code" required />
</label>
</div>
<div>
<input class="btn btn-primary" type="submit" value="Add" />
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-bind="click: closeModal">Cancel</button>
</div>
</div>
JS
define(function (require) {
var dataservice = require('services/dataservice'),
allCustomers = ko.observableArray([]),
repairlines = ko.observableArray([]);
function init() {
dataservice = new dataservice('api/data');
dataservice.getAllRows('AllCustomers').then(function (data) {
data.results.forEach(function (item) {
allCustomers.push(item);
});
}).fail(function() {
});
dataservice.getAllRows('EntireRepairLineLib').then(function (data) {
data.results.forEach(function (item) {
repairlines.push(item);
});
}).fail(function() {
});
$('.testen .typeahead').typeahead({
name: 'countries',
prefetch: 'http://twitter.github.io/typeahead.js/data/countries.json',
limit: 10
});
}
init();
AddRepairOrderLineModal = function (loggedInEmployee) {
//later ook customer en repairorder meegeven!
this.allCustomers = allCustomers;
this.choosenCustomerId = ko.observable(); //holds the Id of the chosen customer
this.Description = ko.observable();
this.Code = ko.observable();
this.Mat = ko.observable();
this.Location = ko.observable();
this.Rep = ko.observable();
this.Dum = ko.observable();
this.Dam = ko.observable();
this.Qty = ko.observable();
this.Hours = ko.observable();
this.Tariff = ko.observable();
this.Costs = ko.observable();
this.CreationDate = (new Date().getMonth() + 1) + "-" + new Date().getDate() + "-" + new Date().getFullYear();
this.IsAgreement = ko.observable(true);
this.IsAuthorized = ko.observable(true);
this.DoRepair = ko.observable(true);
this.selectedEmployee = loggedInEmployee;
/* $(".repairlinename").autocomplete({
source: repairlines
});*/
$(document).ready(function() {
alert('done');
$('#testen').append(' Leroy');
});
};
AddRepairOrderLineModal.prototype.ok = function() {
var jsonObj = [];
jsonObj.push({
Description: this.Description(), Code: this.Code(),
Mat: this.Mat(), Location: this.Location(),
Rep: this.Rep(), Dum: this.Dum(), Dam: this.Dam(),
CustomerId: this.choosenCustomerId(), Qty: this.Qty(), Hours: this.Hours(),
Tariff: this.Tariff(), Costs: this.Costs(), CreationDate: this.CreationDate,
IsAgreement: this.IsAgreement(), IsAuthorized: this.IsAuthorized(), DoRepair: this.DoRepair(),
});
this.modal.close(jsonObj);
};
AddRepairOrderLineModal.prototype.closeModal = function() {
return this.modal.close();
};
return AddRepairOrderLineModal;
});
/*define(['durandal/app','services/dataservice'], function(app,dataservice) {
AddRepairOrderLineModal = function (loggedInEmployee) {
//later ook customer en repairorder meegeven!
this.Description = ko.observable();
this.Code = ko.observable();
this.Mat = ko.observable();
this.Location = ko.observable();
this.Rep = ko.observable();
this.Dum = ko.observable();
this.Dam = ko.observable();
this.Customer = ko.observable();
this.Qty = ko.observable();
this.Hours = ko.observable();
this.Tariff = ko.observable();
this.Costs = ko.observable();
this.CreationDate = (new Date().getMonth() + 1) + "-" + new Date().getDate() + "-" + new Date().getFullYear();
this.IsAgreement = ko.observable(true);
this.IsAuthorized = ko.observable(true);
this.DoRepair = ko.observable(true);
this.selectedEmployee = loggedInEmployee;
};
AddRepairOrderLineModal.prototype.ok = function() {
var jsonObj = [];
jsonObj.push({
Description: this.Description(), Code: this.Code(),
Mat: this.Mat(), Location: this.Location(),
Rep: this.Rep(), Dum: this.Dum(), Dam: this.Dam(),
Customer: this.Customer(), Qty: this.Qty(), Hours: this.Hours(),
Tariff: this.Tariff(), Costs: this.Costs(), CreationDate: this.CreationDate,
IsAgreement: this.IsAgreement(), IsAuthorized: this.IsAuthorized(), DoRepair: this.DoRepair()
});
this.modal.close(jsonObj);
};
AddRepairOrderLineModal.prototype.closeModal = function() {
return this.modal.close();
};
return AddRepairOrderLineModal;
/*
http://stackoverflow.com/questions/7537002/autocomplete-combobox-with-knockout-js-template-jquery
http://jsfiddle.net/rniemeyer/PPsRC/
*//*
});
*/
我希望有人能帮助我如何做到这一点！源是修复线，这些都是正确填写
我的第一个想法是，这将做的伎俩，但它不:(我相信它与Durandal框架中的模态生命周期有关！ – 2013-04-25 07:37:38
对不起，没有阅读你的答案右XD，问题是我没有在我的项目中包含Knockout-bootstrap javascript :)现在一切都正常:) – 2013-04-25 07:51:17
我确实有另外一件事，修复线是al对象，我该怎么做？ – 2013-04-25 08:44:47