knockout js,向数组中添加其他元素

时间:2017-05-06 21:37:31

标签: javascript jquery arrays knockout.js

我有一个应用程序,我想在数组中的项目中添加额外的元素,我有created a fiddle我想要实现的目标。

因此用户启动应用程序,他们点击下一步填写项目和描述的一些细节,然后他们应该点击下一步并填写项目的价格(这是我被困的地方)。这个例子起到了一定的作用,就像每当我尝试实现价格部分时,我似乎都错了。你会看到,一旦我点击下一步该项目被添加到数组,但是如何添加更多的元素到数组中的当前项目。如果我没有意义,逻辑应该是:

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

我知道我可以在一个页面上完成所有操作,但我不希望我想要淘汰赛能够在名称和说明页面后添加价格。我还希望能够返回并修改该项目。你能帮我看看我接下来要做什么吗?

当我插入名称和描述时,我是否还必须在数组中为价格创建一个空元素?然后一旦输入价格,以某种方式将其插入数组中的price元素?不确定如何实现这一点。

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

我的代码如下:

$(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>

1 个答案:

答案 0 :(得分:0)

好的,所以我添加了一个新的observable跟踪页码以及基本功能来增加/减少数量,然后我只需在添加价格后添加新项目。

&#13;
&#13;
$(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);
})
&#13;
<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>
&#13;
&#13;
&#13;