README

此扩展为 ActiveForm 提供替代方案。自动生成 KnockoutJS 视图模型（使用 knockout 映射库），作为您定制的起点，例如计算可观察对象。此外，您还可以获得一些更多输入类型，如 "decimal"、"percent"、"date" 和 "datetime"，它们将原始数据以用户地区格式显示并存储为 ISO 格式。

安装

安装此扩展的最佳方式是通过 composer。

运行以下命令：

php composer.phar require --prefer-dist e-frank/yii2-knockout "*"

或者

"e-frank/yii2-knockout": "*"

将以下内容添加到您的 composer.json 文件的 require 部分。

使用方法

视图的示例代码。请注意，您将模型加载和验证代码放在控制器/操作中。

<?php
use x1\knockout\ActiveForm;

$this->title  = 'Programmatic Viewmodel Generation';
	
// init data from default or post
$post = Yii::$app->request->post();
$data = empty($post) ? [
	'title' => '', 
	'value' => 1234.56, 
	'date'  => sprintf('%s%d:00', date('Y-m-d H:'), date('i') - (date('i') % 15))
	] : $post['DynamicModel'] ;

// create a dynamic model, for demonstration purpose
$model = new yii\base\DynamicModel($data);
$model->addRule(['title'], 'string', ['max' => 128]);
$model->addRule(['title'], 'required');
$model->addRule(['value'], 'number', ['min' => 0]);

// validate, usually done in controller
if (!empty($post)) {
	$model->validate();
}

// show what we have got
var_dump([
	'attributes' => $model->attributes,
	'errors'     => $model->getErrors(),
	'post'       => $post,
	]);

?>

<?php $form = ActiveForm::begin(['errors' => $model->getErrors(), 'defaults' => ['decimals' => 3]]); ?>
<div class="panel panel-default">
    <div class="panel-heading"><?= $this->title ?></div>
    <div class="panel-body">
		<?= $form->field($model, 'title') ?>
		<?php #= $form->field($model, 'value')->decimal(['decimal' => ['thousandsSeparator' => ' ']]) ?>
		<?= $form->field($model, 'value')->decimal() ?>
		computed raw data: <code data-bind="text: comp" class="text-right"></code>
		computed user's display format: <code data-bind="text: comp.display" class="text-right"></code>
		<hr />
		<?= $form->field($model, 'date')->datetime() ?>
		<code data-bind="text: JSON.stringify(ko.mapping.toJS($data))"></code>

    </div>
	<div class="panel-footer">
		<div class="text-right">
			<button data-bind="click: validate" class="btn btn-info">
				VALIDATE
			</button>
			<button data-bind="
				text:   hasError() ? 'HAS ERRORS' : 'IS VALID: Submit', 
				css:    {'btn-primary': !hasError(), 'btn-danger': hasError()},
				enable: !hasError()"
				class="btn">
			</button>
		</div>
	</div>
</div>
<?php ActiveForm::end() ?>

在视图末尾，所有其他脚本加载之后，放置自定义 viewModel 增强功能

<script>
mapping.viewModel = function(self) {
	console.log(self, x1);
    
    self.comp = ko.pureComputed(function() {
    	return self.value() * 1.2;
    }).extend({"decimal":null});

    // must return self
    return self;
}
</script>

演示页面应如下所示