Question

请问您能解释一下哪个对象应该格式化数据以及哪个对象以什么格式存储数据：Model或ViewModel？例如，我有一个输入字段，表示货币格式$ 1,000.00的数据。 ModelView是否存储＆＃34; 1,000.00＆＃34;或只是＆＃34; 1＆＃34;？如果ModelView存储＆＃34; $ 1,000.00＆＃34;该对象或模型是否将其转换为＆＃34; 1＆＃34;？

ModelView: {
    amount: "$1,000.00",  // The input field is filled by MV from this prop
    getAmount() { return formatter.unformat(this.amount); }
}

或

ModelView: {
    amount: "$1,000.00",  // The input field is filled by MV from this prop
    getAmount() { return this.amount; }
}

谁填补了模特？

ModelView: {
    amount: "$1,000.00",
    fillModel(product) {  // Product is a Model
        product.amount = formatter.unformat(this.amount);
    }
}

或

ModelView = {
    amount: "$1,000.00",
    getAmount() {
        return formatter.unformat(this.amount);
    }
}
product = {
    amount: 0
}
// somewhere (where?)
product.amount = ViewModel.getAmount();

（在这种情况下及以下：我应该在哪里放置代码product.amount = ViewModel.getAmount();）

或

ModelView = {
    amount: "$1,000.00",
    getAmount() {
        return this.amount;
    }
}
product = {
    amount: 0
}
// somewhere (where?)
product.amount = formatter.unformat(ViewModel.getAmount());

Answer 1

在MV *模式中，视图是呈现模型。因此，在您的情况下，模型应存储数字并保留ModelView或View的格式化部分。因为将来，您不仅可以使用$显示模型，还可以使用其他单位显示模型。

让我们举一个简单的例子：在存储时间时，它们通常存储时间戳＆＃34;这是一个数字而不是年，日，小时，秒。

为什么？

因为在一段时间内，它可能因时区而异。通过存储数字，您可以轻松地比较，增加，减少，转移......

此时，我的时区可能与您的时区不同，但此当前时间将按照放样流程的数字（时间戳）存储：D

Answer 2

在MVVM中，ViewModel是视图和模型之间的中介。其任务是例如

如果其他更新，则更新模型/视图。
以这样的方式格式化模型，使用户可以更好地理解/读取模型值，在您的情况下，模型将保存金额为$。
进行用户输入的验证。这意味着，如果用户输入的内容不正确，则不会更新模型。

在你的情况下，模型不应该保存已经格式化的字符串，因为当你需要计算某些东西时，很可能在你的程序中使用它。

这是一个非常基本的实现：

(() => {
  
  const view = document.querySelector('#view');
  const model = document.querySelector('#model');
  
  
  const viewModel = {
    amount: null,
    toView() {
      return this.amount.toLocaleString() + '$';
    },
    toModel(val) {
      const cleaned = +(val.replace(/[,.$]/g, ''));
      this.amount = cleaned;
      model.innerHTML = cleaned;
    }
  };
  
  const updateView = () => {
    view.value = viewModel.toView(); 
  }
  
  // Init
  viewModel.toModel('1.000.000$');
  updateView();
  
  view.addEventListener('input', e => viewModel.toModel(e.target.value));
})();

  <input id="view" type="text" />
  <br><br>
  <strong>ModelValue:</strong> <code id="model"></code>

使用model对象的替代实现：

(() => {
  
  const viewElement = document.querySelector('#view');
  const modelElement = document.querySelector('#model');

  function updateModelElement() { modelElement.innerHTML = model.amount; }

  const model = {
    amount: 1000000
  };

  const viewModel = {
    toView(modelValue) {
      viewElement.value = modelValue.toLocaleString() + '$';
    },
    toModel(viewValue) {
      const cleaned = +(viewValue.replace(/[,.$]/g, ''));
      model.amount = cleaned;
      // This is just here to show model changes in HTML
      updateModelElement();
    }
  };

  // Init
  updateModelElement();
  viewModel.toView(model.amount);
  
  // Listen to updates from view
  viewElement.addEventListener('input', e => viewModel.toModel(e.target.value));
})();

<input id="view" type="text" />
  <br><br>
  <strong>ModelValue:</strong> <code id="model"></code>

如果您需要更多信息，我建议您搜索互联网。 JavaScript中有很多关于MVVM的文章。这是一个让你入门的人：

https://addyosmani.com/blog/understanding-mvvm-a-guide-for-javascript-developers/

javascript中的MVVM模式负责什么

2 个答案: