剔除js，向数组中添加其他元素 [英] knockout js, add additional elements to an array

问题描述

我有一个应用，我想在其中向数组中的项目添加额外的元素，我已经创建了一个弄弄我要实现的目标.

I have an app where I want to add extra elements to an item in an array, I have created a fiddle of what I'm trying to achieve.

因此，用户启动应用程序，然后单击下一步"以填写项目的一些详细信息和说明，然后应单击下一步"并为该项目填写价格(这就是我所坚持的).这个示例在一定程度上起作用，就像在我尝试实现价格部分时一样，我似乎弄错了.当我单击下一步时，您将看到将该项添加到数组中，但是如何将更多元素添加到数组中的当前项.如果我没有道理，逻辑应该是:

So the user starts the app, they click next fill in some details of an item and a description, they then should click next and fill in a price for the item(this is where I'm stuck). This example works up to a point, as in whenever I try and implement the price part I seem to be getting it wrong. You'll see once I click next the item is added to the array, however how do add more elements to the current item in the array. In case I've not made sense the logic should be:

开始 第一页(输入名称和描述) 第二页(输入价格)

Start Page one (enter name and description) Page two (enter price)

我知道我可以在一页上完成所有操作，但是我不想让淘汰赛能够在名称和说明页之后添加价格.我还希望能够返回并修改该项目.有人可以帮忙看看我下一步该怎么做吗?

I understand I could do this all on one page but I don't want to I want knockout to be able to add a price after the name and description page. I would also like to be able to go back and amend the item. Can you anybody help in seeing what I should be doing next?

当我插入名称和描述时，是否还需要在数组中为价格添加一个空元素?然后，一旦输入了价格，就以某种方式将其插入数组中的price元素了吗?不确定如何/是否应该实施.

When I insert the name and description, do I have to also make an empty element in the array for the price? Then once the price is entered somehow insert this into the price element in the array? Not sure how/if this should be implemented.

这是我的第一个淘汰赛应用程序，因此，如果我实际上所做的正确，很感谢收到任何帮助或指针，我会感到惊讶:)

This is my first knockout app so I be surprised if what I've actually done is correct, any help or pointers gratefully received :)

我的代码如下:

$(function() {
	var main = new stuff();
	ko.applyBindings(main, $('#ko')[0]);
});

function Item(data) {
	this.itemname = ko.observable(data.itemname);
	this.itemdescription = ko.observable(data.itemdescription);
	this.itemenabled = ko.observable(data.itemenabled);
}

function stuff() {
	var self = this;

	self.items = ko.observableArray([]);
	self.newItemName = ko.observable();
	self.newItemDescription = ko.observable();
	self.newItemEnabled = ko.observable();

	// Operations
	self.addItem = function() {
		self.items.push(new Item({
			itemname: this.newItemName(),
			itemdescription: this.newItemDescription(),
			itemenabled: this.newItemEnabled()
		}));
	};
};

//jquery stuff
$('#start').on('click', function(e) {
	$("#page1").show(500);
	$('#panel1').css('visibility', 'visible').hide().fadeIn().removeClass('hidden');
	$("#start").hide(500);
})

$('#back').on('click', function(e) {
	$("#panel1").hide(500);			 
	$("#page1").hide(500);			 
	$("#start").show(500);
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button type="submit" class="btn btn-primary" id="start">Start</button>

<div id="ko">
	<div class="panel panel-default hidden" id="panel1">
		<div id="page1">
			<form data-bind="submit: addItem">
				<div class="panel panel-default" style="padding: 15px 0px 0px 0px;" id="panel2">
					<div class="container">
						<div class="form-group row">
							<label for="inputItemName" class="col-lg-3 col-form-label">Enter Item Name</label>
							<div class="col-lg-8">
								<input type="text" class="form-control form-control-lg" id="inputItemName" data-bind="value: newItemName" placeholder="">
							</div>
						</div>
						<div class="form-group row">
							<label for="textareaItemDescription" class="col-lg-3 col-form-label">Enter Item Description</label>
							<div class="col-lg-8">
								<textarea class="form-control" id="textareaItemDescription" rows="3" data-bind="value: newItemDescription"></textarea>
							</div>
						</div>
						<div class="form-group row">
							<div class="col-sm-offset-3 col-sm-9">
								<label class="custom-control custom-checkbox checkbox-inline no_indent" style="font-weight:bold;">
									<input type="checkbox" class="custom-control-input" checked="checked" data-bind="checked: newItemEnabled">
									<span class="custom-control-indicator"></span>
									<span class="custom-control-description" style="padding-bottom: 2px;">Enabled</span>
								</label>
							</div>
						</div>
					</div>
				</div>
				<button type="button" class="btn btn-primary" id="back">Back</button>
				<div class="pull-right">
					<button type="submit" class="btn btn-primary" id="next1">Next</button>
				</div>
			</form>
		</div>
	</div>

	<ul data-bind="foreach: items, visible: items().length > 0">
		<li>
			<input data-bind="value: itemname" style="color: black;" />
		</li>
		<li>
			<input data-bind="value: itemdescription" style="color: black;" />
		</li>
		<li>
			<input type="checkbox" data-bind="checked: itemenabled" />
		</li>
	</ul>
</div>

推荐答案

好，所以我添加了一个新的可观察项以跟踪页码以及基本功能以增加/减少页码，然后我只需在价格也已添加.

Ok, so I have added a new observable to track the page number along with basic functions to increment/decrement the number then I simply add the new item after the price has also been added.

$(function() {
  var main = new stuff();
  ko.applyBindings(main, $('#ko')[0]);
});

function Item(data) {
  this.itemname = ko.observable(data.itemname);
  this.itemdescription = ko.observable(data.itemdescription);
  this.itemenabled = ko.observable(data.itemenabled);
  this.price = ko.observable(data.itemprice);
}

function stuff() {
  var self = this;

  self.items = ko.observableArray([]);
  self.newItemName = ko.observable();
  self.newItemDescription = ko.observable();
  self.newItemEnabled = ko.observable();
  self.newItemPrice = ko.observable();
  self.page = ko.observable(1);
  // Operations
  self.next = function() {
    if (self.page() === 2) {
      self.addItem();
    }
    self.page(self.page() + 1)
  }

  self.back = function() {
    if (self.page() == 1) {
      $("#panel1").hide(500);
      $("#page1").hide(500);
      $("#start").show(500);
    }
    self.page(self.page() - 1);
  }

  self.addItem = function() {
    self.items.push(new Item({
      itemname: this.newItemName(),
      itemdescription: this.newItemDescription(),
      itemenabled: this.newItemEnabled(),
      itemprice: this.newItemPrice(),
    }));
  };
};

//jquery stuff
$('#start').on('click', function(e) {
  $("#page1").show(500);
  $('#panel1').css('visibility', 'visible').hide().fadeIn().removeClass('hidden');
  $("#start").hide(500);
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button type="submit" class="btn btn-primary" id="start">Start</button>

<div id="ko">
  <div class="panel panel-default hidden" id="panel1">
    <div id="page1">
      <form data-bind="submit: next">
        <div class="panel panel-default" style="padding: 15px 0px 0px 0px;" id="panel2">
          <div class="container" data-bind="if: page() == 1">
            <div class="form-group row">
              <label for="inputItemName" class="col-lg-3 col-form-label">Enter Item Name</label>
              <div class="col-lg-8">
                <input type="text" class="form-control form-control-lg" id="inputItemName" data-bind="value: newItemName" placeholder="">
              </div>
            </div>
            <div class="form-group row">
              <label for="textareaItemDescription" class="col-lg-3 col-form-label">Enter Item Description</label>
              <div class="col-lg-8">
                <textarea class="form-control" id="textareaItemDescription" rows="3" data-bind="value: newItemDescription"></textarea>
              </div>
            </div>
            <div class="form-group row">
              <div class="col-sm-offset-3 col-sm-9">
                <label class="custom-control custom-checkbox checkbox-inline no_indent" style="font-weight:bold;">
									<input type="checkbox" class="custom-control-input" checked="checked" data-bind="checked: newItemEnabled">
									<span class="custom-control-indicator"></span>
									<span class="custom-control-description" style="padding-bottom: 2px;">Enabled</span>
								</label>
              </div>
            </div>
          </div>
        </div>
        <div class="container" data-bind="if: page() == 2">
          <div class="form-group row">
            <label for="inputPrice" class="col-lg-3 col-form-label">Enter Price</label>
            <div class="col-lg-8">
              <input type="text" class="form-control form-control-lg" id="inputPrice" data-bind="value: newItemPrice" placeholder="">
            </div>
          </div>
        </div>
        <button type="button" data-bind="click: back" class="btn btn-primary" id="back">Back</button>
        <div class="pull-right">
          <button type="submit" class="btn btn-primary" id="next1">Next</button>
        </div>
      </form>
    </div>
  </div>

  <ul data-bind="foreach: items, visible: items().length > 0">
    <li>
      <input data-bind="value: itemname" style="color: black;" />
    </li>
    <li>
      <input data-bind="value: itemdescription" style="color: black;" />
    </li>
    <li>
      <label for="price">Price</label>
      <input id="price" data-bind="value: price" style="color: black;" />
    </li>
    <li>
      <input type="checkbox" data-bind="checked: itemenabled" />
    </li>
  </ul>
</div>

这篇关于剔除js，向数组中添加其他元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！