คำถามติดแท็ก knockout.js

ฉันกำลังสร้างฟังก์ชันการทำงานบนหน้าเว็บซึ่งผู้ใช้สามารถดำเนินการได้หลายครั้ง ผ่านการกระทำของผู้ใช้อ็อบเจ็กต์ / โมเดลถูกสร้างขึ้นและนำไปใช้กับ HTML โดยใช้ ko.applyBindings () HTML ที่ผูกข้อมูลถูกสร้างขึ้นผ่านเทมเพลต jQuery จนถึงตอนนี้ดีมาก เมื่อฉันทำขั้นตอนนี้ซ้ำโดยสร้างวัตถุ / โมเดลที่สองและโทรหา ko.applyBindings () ฉันพบปัญหาสองประการ: มาร์กอัปจะแสดงวัตถุ / โมเดลก่อนหน้าตลอดจนวัตถุ / โมเดลใหม่ ข้อผิดพลาดของจาวาสคริปต์เกิดขึ้นที่เกี่ยวข้องกับคุณสมบัติอย่างใดอย่างหนึ่งในวัตถุ / โมเดลแม้ว่าจะยังแสดงผลในมาร์กอัป เพื่อแก้ไขปัญหานี้หลังจากผ่านครั้งแรกฉันเรียก jQuery ของ. empty () เพื่อลบ HTML ที่มีเทมเพลตซึ่งมีแอตทริบิวต์การผูกข้อมูลทั้งหมดเพื่อไม่ให้อยู่ใน DOM อีกต่อไป เมื่อผู้ใช้เริ่มกระบวนการสำหรับการส่งครั้งที่สอง HTML ที่ผูกข้อมูลจะถูกเพิ่มเข้าไปใน DOM อีกครั้ง แต่อย่างที่ฉันพูดไปเมื่อ HTML ถูกเพิ่มเข้าไปใน DOM อีกครั้งและเชื่อมโยงกับอ็อบเจ็กต์ / โมเดลใหม่มันยังคงรวมข้อมูลจากอ็อบเจ็กต์ / โมเดลแรกและฉันยังคงได้รับข้อผิดพลาด …

113 javascript  knockout.js 

ฉันต้องการpushไอเท็มใหม่ไปยัง an observableArrayแต่ถ้าไอเท็มนั้นยังไม่มีอยู่ มีฟังก์ชัน "ค้นหา" หรือรูปแบบที่แนะนำสำหรับการบรรลุสิ่งนี้ใน KnockoutJS หรือไม่? ฉันสังเกตเห็นว่าremoveฟังก์ชันบนobservableArrayสามารถรับฟังก์ชันสำหรับการส่งผ่านในเงื่อนไข ฉันเกือบจะต้องการฟังก์ชันเดียวกัน แต่จะผลักดันก็ต่อเมื่อเงื่อนไขที่ส่งผ่านเป็นหรือไม่เป็นจริงเท่านั้น

103 knockout.js 

ฉันมีรหัสที่น่าพิศวงนี้: function Task(data) { this.title = ko.observable(data.title); this.isDone = ko.observable(data.isDone); } function TaskListViewModel() { // Data var self = this; self.tasks = ko.observableArray([]); self.newTaskText = ko.observable(); self.incompleteTasks = ko.computed(function() { return ko.utils.arrayFilter(self.tasks(), function(task) { return !task.isDone() }); }); // Operations self.addTask = function() { self.tasks.push(new Task({ title: this.newTaskText() })); self.newTaskText(""); …

99 javascript  knockout.js 

ฉันใช้KnockoutJSเวอร์ชัน 2.0.0 ถ้าฉันบ่วงผ่านคุณสมบัติทั้งหมดของวัตถุว่าฉันสามารถทดสอบว่าแต่ละคุณสมบัติเป็นko.observable? นี่คือสิ่งที่ฉันได้ลองทำแล้ว: var vm = { prop: ko.observable(''), arr: ko.observableArray([]), func: ko.computed(function(){ return this.prop + " computed"; }, vm) }; for (var key in vm) { console.log(key, vm[key].constructor === ko.observable, vm[key] instanceof ko.observable); } แต่จนถึงขณะนี้ทุกอย่างเป็นเท็จ

99 javascript  knockout.js 

ฉันต้องมีการเชื่อมโยงข้อมูลหลายรายการในองค์ประกอบเดียว ตัวอย่างเช่นผมต้องการhrefเช่นเดียวกับhtmlข้อมูลที่มีผลผูกพันกับหนึ่ง aแท็ก ฉันได้ลองสิ่งนี้แล้ว <a data-bind="html: name" data-bind="attr: { href: url }" data-bind="attr: { 'data-prop': xyz }"> </a> แต่ไม่ได้ผล ดูเหมือนว่าสิ่งที่น่าพิศวงสนับสนุนเฉพาะผูกพันหนึ่ง data-bindทรัพย์สิน? วิธีการรวมแอตทริบิวต์ "" hrefภายในhtmlและ "" ที่กำหนดเองdata-propไว้ในองค์ประกอบเดียว

96 javascript  jquery  knockout.js 

ฉันพบว่าตัวเองใช้สำนวนนี้ในเทมเพลต HTML ที่ใช้ KO อยู่ตลอดเวลา: <!-- ko if: isEdit --> <td><input type="text" name="email" data-bind="value: email" /></td> <!-- /ko --> <!-- ko ifnot: isEdit --> <td data-bind="text: email"></td> <!-- /ko --> มีวิธีที่ดีกว่า / สะอาดกว่าในการทำเงื่อนไขใน KO หรือมีแนวทางที่ดีกว่าการใช้โครงสร้าง if-else แบบเดิมหรือไม่? นอกจากนี้ฉันอยากจะชี้ให้เห็นว่า Internet Explorer (IE 8/9) บางเวอร์ชันไม่ได้แยกวิเคราะห์ตัวอย่างข้างต้นอย่างถูกต้อง โปรดดูคำถาม SO นี้สำหรับข้อมูลเพิ่มเติม สรุปโดยย่อคืออย่าใช้ความคิดเห็น (การผูกเสมือน) ภายในแท็กตารางเพื่อรองรับ IE …

95 javascript  knockout.js 

ฉันต้องการสร้างแอพมือถือที่สร้างขึ้นจากอะไรมากนอกจาก html / css และ JavaScript ในขณะที่ฉันมีความรู้ดีเกี่ยวกับวิธีสร้างเว็บแอปด้วย JavaScript แต่ฉันคิดว่าฉันอาจดูกรอบงานเช่น jquery-mobile ตอนแรกฉันคิดว่า jquery-mobile ไม่มีอะไรมากไปกว่านั้นแล้ววิดเจ็ตเฟรมเวิร์กที่กำหนดเป้าหมายไปที่เบราว์เซอร์มือถือ คล้ายกับ jquery-ui มาก แต่สำหรับโลกมือถือ แต่ฉันสังเกตว่า jquery-mobile เป็นมากกว่านั้น มันมาพร้อมกับสถาปัตยกรรมมากมายและให้คุณสร้างแอพด้วยไวยากรณ์ html ที่เปิดเผย ดังนั้นสำหรับแอปที่คิดได้ง่ายที่สุดคุณไม่จำเป็นต้องเขียน JavaScript เพียงบรรทัดเดียวด้วยตัวเอง (ซึ่งดีมากเพราะเราทุกคนชอบทำงานน้อยลงใช่ไหม) เพื่อสนับสนุนแนวทางในการสร้างแอปโดยใช้ไวยากรณ์ html ที่เปิดเผยฉันคิดว่าการรวม jquery-mobile กับ knockoutjs เป็นสิ่งที่ดี Knockoutjs เป็นเฟรมเวิร์ก MVVM ฝั่งไคลเอ็นต์ที่มีเป้าหมายเพื่อนำพลังพิเศษ MVVM ที่รู้จักจาก WPF / Silverlight มาสู่โลก JavaScript สำหรับฉัน MVVM คือโลกใบใหม่ ในขณะที่ฉันได้อ่านเกี่ยวกับเรื่องนี้มามากแล้ว แต่ฉันไม่เคยใช้มันด้วยตัวเองมาก่อนเลย …

88 mvvm  jquery-mobile  knockout.js 

ใน knockout.js 2.1.0 ในเทมเพลตที่ใช้การผูก foreach คุณสามารถเข้าถึงดัชนีของรายการปัจจุบันผ่านฟังก์ชัน $ index () ในการผูก foreach แบบซ้อนมีวิธีใดในการเข้าถึงดัชนีของ $ parent จากเทมเพลตหรือไม่? สมมติว่าฉันมีโครงสร้างข้อมูลดังนี้: var application = { topModel: [ { {subModel: [{'foo':'foo'}, { 'bar':'bar'}]}, // this has top:0 and sub:0 {subModel: [{'foo2':'foo2'}, { 'bar2':'bar2'}]} // this has top:0 and sub:1 }, { {subModel: [{'foo':'foo'}, { 'bar':'bar'}]} // …

87 javascript  knockout.js  jquery-templates 

ฉันกำลังสร้าง UI การอนุญาตฉันมีรายการสิทธิ์พร้อมรายการเลือกถัดจากสิทธิ์แต่ละรายการ สิทธิ์จะแสดงโดยอาร์เรย์ของวัตถุที่สังเกตได้ซึ่งเชื่อมโยงกับรายการที่เลือก: <div data-bind="foreach: permissions"> <div class="permission_row"> <span data-bind="text: name"></span> <select data-bind="value: level, event:{ change: $parent.permissionChanged}"> <option value="0"></option> <option value="1">R</option> <option value="2">RW</option> </select> </div> </div> ตอนนี้ปัญหาคือ: เหตุการณ์การเปลี่ยนแปลงจะเพิ่มขึ้นเมื่อ UI เพิ่งเติมข้อมูลเป็นครั้งแรก ฉันเรียกใช้ฟังก์ชัน ajax ของฉันรับรายการสิทธิ์จากนั้นเหตุการณ์จะถูกยกขึ้นสำหรับแต่ละรายการสิทธิ์ นี่ไม่ใช่พฤติกรรมที่ฉันต้องการจริงๆ ฉันต้องการให้เพิ่มขึ้นก็ต่อเมื่อผู้ใช้เลือกค่าใหม่สำหรับสิทธิ์ในรายการเลือกเท่านั้นฉันจะทำอย่างไร

87 knockout.js 

ฉันมีอินพุตที่มีการเชื่อมโยงสิ่งที่น่าพิศวงกับค่า เมื่อฉันอัปเดตค่าโดยใช้เมธอด. val () ของ jquery ค่าที่เปลี่ยนแปลงจะไม่แสดงใน viewModel ฉันต้องใช้ jQuery เพื่อตั้งค่านี้ ฉันจะทริกเกอร์การอัปเดตไปที่ viewModel ได้อย่างไร

86 knockout.js 

ฉันเพิ่งเริ่มใช้ Knockout.js (อยากลองใช้เสมอ แต่ตอนนี้ฉันมีข้อแก้ตัว!) - อย่างไรก็ตามฉันพบปัญหาประสิทธิภาพการทำงานที่แย่มากเมื่อผูกตารางกับชุดที่ค่อนข้างเล็ก ข้อมูล (ประมาณ 400 แถวหรือมากกว่านั้น) ในรุ่นของฉันฉันมีรหัสต่อไปนี้: this.projects = ko.observableArray( [] ); //Bind to empty array at startup this.loadData = function (data) //Called when AJAX method returns { for(var i = 0; i < data.length; i++) { this.projects.push(new ResultRow(data[i])); //<-- Bottleneck! } }; ปัญหาคือการforวนรอบด้านบนใช้เวลาประมาณ 30 วินาทีหรือประมาณนั้นโดยมีประมาณ …

86 javascript  performance  knockout.js 

เป็นไปได้หรือไม่ที่จะได้รับค่าปัจจุบันของค่าที่สังเกตได้ภายในการสมัครรับข้อมูลที่สังเกตได้ก่อนที่จะได้รับค่าใหม่ ตัวอย่าง: this.myObservable = ko.observable(); this.myObservable.subscribe(function(newValue){ //I'd like to get the previous value of 'myObservable' here before it's set to newValue });

86 knockout.js  knockout-2.0  observable 

ในโมเดลมุมมองของฉันฉันมีค่า IsMale ที่มีค่าเป็นจริงหรือเท็จ ใน UI ของฉันฉันต้องการเชื่อมโยงกับปุ่มตัวเลือกต่อไปนี้: <label>Male <input type="radio" name="IsMale" value="true" data-bind="checked:IsMale"/> </label> <label>Female <input type="radio" name="IsMale" value="false" data-bind="checked:IsMale"/> </label> ปัญหาที่ฉันคิดcheckedว่าคาดว่าจะมีสตริง "true" / "false" คำถามของฉันคือฉันจะรับการเชื่อม 2 ทางพร้อม UI และโมเดลนี้ได้อย่างไร

84 javascript  knockout.js  knockout-mapping-plugin  knockout-2.0