typehead (twitter ブートストラップ) でオートコンプリート入力フィールドを実現しようとしています。このオートコンプリート フィールドはモーダルにする必要がありますが、機能していないようです! また、値を選択すると他のフィールドが更新される必要があるため、ノックアウトで観察可能でなければなりません。
だから私はモーダルでこれをやろうと思っています!
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/
*//*
});
*/
誰かがこれを行う方法について私を助けてくれることを願っています! ソースは修復ラインです。これらはすべて正しく入力されています